mirror of
https://github.com/flutter/flutter
synced 2024-10-13 11:42:54 +00:00
[Gallery] Material elevations (shadows) demo (#20842)
* [Gallery] Elevations demo. TODO: Correct icon. * [Gallery] More elevations for the elevation demo. * [Gallery] Elevation toggle for elevation demo. * [Demos] Update temp icon on elevations demo. * [Demos] Changing action icon. * [Demos] Same. * [Demos] Adding new and const. * [Demos] Reverting formatting. * [Gallery] PR Feedback.
This commit is contained in:
parent
09e7902f5b
commit
47cffd160c
|
@ -0,0 +1,62 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
class ElevationDemo extends StatefulWidget {
|
||||
static const String routeName = '/material/elevation';
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() => _ElevationDemoState();
|
||||
}
|
||||
|
||||
class _ElevationDemoState extends State<ElevationDemo> {
|
||||
bool _showElevation = true;
|
||||
|
||||
List<Widget> buildCards() {
|
||||
const List<double> elevations = <double>[
|
||||
0.0,
|
||||
1.0,
|
||||
2.0,
|
||||
3.0,
|
||||
4.0,
|
||||
5.0,
|
||||
8.0,
|
||||
16.0,
|
||||
24.0,
|
||||
];
|
||||
|
||||
return elevations.map((double elevation) {
|
||||
return new Center(
|
||||
child: new Card(
|
||||
margin: const EdgeInsets.all(20.0),
|
||||
elevation: _showElevation ? elevation : 0.0,
|
||||
child: new SizedBox(
|
||||
height: 100.0,
|
||||
width: 100.0,
|
||||
child: new Center(
|
||||
child: new Text('${elevation.toStringAsFixed(0)} pt'),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new Scaffold(
|
||||
appBar: new AppBar(
|
||||
title: const Text('Elevation'),
|
||||
actions: <Widget>[
|
||||
new IconButton(
|
||||
icon: const Icon(Icons.sentiment_very_satisfied),
|
||||
onPressed: () {
|
||||
setState(() => _showElevation = !_showElevation);
|
||||
},
|
||||
)
|
||||
],
|
||||
),
|
||||
body: new ListView(
|
||||
children: buildCards(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
|
@ -12,6 +12,7 @@ export 'data_table_demo.dart';
|
|||
export 'date_and_time_picker_demo.dart';
|
||||
export 'dialog_demo.dart';
|
||||
export 'drawer_demo.dart';
|
||||
export 'elevation_demo.dart';
|
||||
export 'expansion_panels_demo.dart';
|
||||
export 'grid_list_demo.dart';
|
||||
export 'icons_demo.dart';
|
||||
|
|
|
@ -217,6 +217,15 @@ List<GalleryDemo> _buildGalleryDemos() {
|
|||
routeName: DialogDemo.routeName,
|
||||
buildRoute: (BuildContext context) => new DialogDemo(),
|
||||
),
|
||||
new GalleryDemo(
|
||||
title: 'Elevations',
|
||||
subtitle: 'Shadow values on cards',
|
||||
// TODO(larche): Change to custom icon for elevations when one exists.
|
||||
icon: GalleryIcons.cupertino_progress,
|
||||
category: _kMaterialComponents,
|
||||
routeName: ElevationDemo.routeName,
|
||||
buildRoute: (BuildContext context) => new ElevationDemo(),
|
||||
),
|
||||
new GalleryDemo(
|
||||
title: 'Expand/collapse list control',
|
||||
subtitle: 'A list with one sub-list level',
|
||||
|
|
Loading…
Reference in a new issue