development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-10-13 19:52:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move the Icons demo into a card, and refactor it to use a Table widget. (#13257)

Browse source 
This is in preparation for adding a second card with a demo for animated
icons.

Table refactor is just a cleanup (that also fixes an alignment bug).
This commit is contained in:
amirh 2017-11-29 18:46:59 -08:00 committed by GitHub
parent 4447c0aaf3
commit fcdbdfb476
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 61 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
examples/flutter_gallery/lib/demo/material/icons_demo.dart
View file

@ -44,29 +44,8 @@ class IconsDemoState extends State<IconsDemo> {
});
}
Widget buildIconButton(double iconSize, IconData icon, bool enabled) {
return new IconButton(
icon: new Icon(icon),
iconSize: iconSize,
tooltip: "${enabled ? 'Enabled' : 'Disabled'} icon button",
onPressed: enabled ? handleIconButtonPress : null
);
}
Widget buildSizeLabel(int size, TextStyle style) {
return new SizedBox(
height: size.toDouble() + 16.0, // to match an IconButton's padded height
child: new Center(
child: new Text('$size', style: style)
)
);
}
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final TextStyle textStyle = theme.textTheme.subhead.copyWith(color: theme.textTheme.caption.color);
return new Scaffold(
appBar: new AppBar(
title: const Text('Icons')
@ -77,46 +56,7 @@ class IconsDemoState extends State<IconsDemo> {
padding: const EdgeInsets.all(24.0),
child: new Column(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text('Size', style: textStyle),
buildSizeLabel(18, textStyle),
buildSizeLabel(24, textStyle),
buildSizeLabel(36, textStyle),
buildSizeLabel(48, textStyle),
],
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text('Enabled', style: textStyle),
buildIconButton(18.0, Icons.face, true),
buildIconButton(24.0, Icons.alarm, true),
buildIconButton(36.0, Icons.home, true),
buildIconButton(48.0, Icons.android, true),
],
)
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text('Disabled', style: textStyle),
buildIconButton(18.0, Icons.face, false),
buildIconButton(24.0, Icons.alarm, false),
buildIconButton(36.0, Icons.home, false),
buildIconButton(48.0, Icons.android, false),
],
),
),
],
),
new _IconsDemoCard(handleIconButtonPress),
],
),
),
@ -124,3 +64,63 @@ class IconsDemoState extends State<IconsDemo> {
);
}
}
class _IconsDemoCard extends StatelessWidget {
const _IconsDemoCard(this.handleIconButtonPress);
final VoidCallback handleIconButtonPress;
Widget _buildIconButton(double iconSize, IconData icon, bool enabled) {
return new IconButton(
icon: new Icon(icon),
iconSize: iconSize,
tooltip: "${enabled ? 'Enabled' : 'Disabled'} icon button",
onPressed: enabled ? handleIconButtonPress : null
);
}
Widget _centeredText(String label) =>
new Padding(
// Match the default padding of IconButton.
padding: const EdgeInsets.all(8.0),
child: new Text(label, textAlign: TextAlign.center),
);
TableRow _buildIconRow(double size) {
return new TableRow(
children: <Widget> [
_centeredText(size.floor().toString()),
_buildIconButton(size, Icons.face, true),
_buildIconButton(size, Icons.face, false),
],
);
}
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final TextStyle textStyle = theme.textTheme.subhead.copyWith(color: theme.textTheme.caption.color);
return new Card(
child: new DefaultTextStyle(
style: textStyle,
child: new Table(
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
children: <TableRow> [
new TableRow(
children: <Widget> [
_centeredText('Size'),
_centeredText('Enabled'),
_centeredText('Disabled'),
]
),
_buildIconRow(18.0),
_buildIconRow(24.0),
_buildIconRow(36.0),
_buildIconRow(48.0),
],
),
),
);
}
}