mirror of
https://github.com/flutter/flutter
synced 2024-10-13 19:52:53 +00:00
Move the Icons demo into a card, and refactor it to use a Table widget. (#13257)
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:
parent
4447c0aaf3
commit
fcdbdfb476
|
@ -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),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue