firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Gallery icons demo

Browse Source
This commit is contained in:
Hans Muller 2016-02-19 14:40:11 -08:00
parent 5009f44a62
commit 870d9e95f7
2 changed files with 160 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
examples/material_gallery/lib/demo/icons_demo.dart Normal file
View File

@ -0,0 +1,158 @@
// Copyright 2016 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
class IconsDemo extends StatefulComponent {
IconsDemoState createState() => new IconsDemoState();
}
class IconsDemoState extends State<IconsDemo> {
static final List<Map<int, Color>> iconColorSwatches = <Map<int, Color>>[
Colors.red,
Colors.pink,
Colors.purple,
Colors.deepPurple,
Colors.indigo,
Colors.blue,
Colors.lightBlue,
Colors.cyan,
Colors.teal,
Colors.green,
Colors.lightGreen,
Colors.lime,
Colors.yellow,
Colors.amber,
Colors.orange,
Colors.deepOrange,
Colors.brown,
Colors.grey,
Colors.blueGrey
];
int iconColorIndex = 2;
double iconOpacity = 1.0;
Color get iconColor => iconColorSwatches[iconColorIndex][400];
void handleIconButtonPress() {
setState(() {
iconColorIndex = (iconColorIndex + 1) % iconColorSwatches.length;
});
}
Widget buildIconButton(IconSize size, String name, bool enabled) {
return new IconButton(
size: size,
icon: name,
color: iconColor,
tooltip: "${enabled ? 'enabled' : 'disabled'} $name 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)
)
);
}
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final TextStyle textStyle = theme.text.subhead.copyWith(color: theme.text.caption.color);
return new Scaffold(
toolBar: new ToolBar(
center: new Text('Icons')
),
body: new IconTheme(
data: new IconThemeData(opacity: iconOpacity),
child: new Padding(
padding: const EdgeDims.all(24.0),
child: new Column(
children: <Widget>[
new Row(
justifyContent: FlexJustifyContent.spaceBetween,
alignItems: FlexAlignItems.center,
children: <Widget>[
new Flexible(
flex: 0,
child: new Column(
alignItems: FlexAlignItems.center,
children: <Widget>[
new Text('Size', style: textStyle),
buildSizeLabel(18, textStyle),
buildSizeLabel(24, textStyle),
buildSizeLabel(36, textStyle),
buildSizeLabel(48, textStyle)
]
)
),
new Flexible(
child: new Column(
alignItems: FlexAlignItems.center,
children: <Widget>[
new Text('Enabled', style: textStyle),
buildIconButton(IconSize.s18, 'action/face', true),
buildIconButton(IconSize.s24, 'action/alarm', true),
buildIconButton(IconSize.s36, 'action/home', true),
buildIconButton(IconSize.s48, 'action/android', true)
]
)
),
new Flexible(
child: new Column(
alignItems: FlexAlignItems.center,
children: <Widget>[
new Text('Disabled', style: textStyle),
buildIconButton(IconSize.s18, 'action/face', false),
buildIconButton(IconSize.s24, 'action/alarm', false),
buildIconButton(IconSize.s36, 'action/home', false),
buildIconButton(IconSize.s48, 'action/android', false)
]
)
)
]
),
new Flexible(
child: new Center(
child: new IconTheme(
data: new IconThemeData(opacity: 1.0),
child: new Row(
justifyContent: FlexJustifyContent.center,
children: <Widget>[
new Icon(
icon: 'image/brightness_7',
color: iconColor.withAlpha(0x33) // 0.2 * 255 = 0x33
),
new Slider(
value: iconOpacity,
min: 0.2,
max: 1.0,
activeColor: iconColor,
onChanged: (double newValue) {
setState(() {
iconOpacity = newValue;
});
}
),
new Icon(
icon: 'image/brightness_7',
color: iconColor.withAlpha(0xFF)
),
]
)
)
)
)
]
)
)
)
);
}
}

2
examples/material_gallery/lib/gallery/home.dart
View File

@ -18,6 +18,7 @@ import '../demo/dialog_demo.dart';
import '../demo/drop_down_demo.dart';
import '../demo/fitness_demo.dart';
import '../demo/grid_list_demo.dart';
import '../demo/icons_demo.dart';
import '../demo/modal_bottom_sheet_demo.dart';
import '../demo/page_selector_demo.dart';
import '../demo/persistent_bottom_sheet_demo.dart';
@ -104,6 +105,7 @@ class GalleryHomeState extends State<GalleryHome> {
new GalleryDemo(title: 'Expland/Collapse List Control', builder: () => new TwoLevelListDemo()),
new GalleryDemo(title: 'Floating Action Button', builder: () => new TabsFabDemo()),
new GalleryDemo(title: 'Grid', builder: () => new GridListDemo()),
new GalleryDemo(title: 'Icons', builder: () => new IconsDemo()),
new GalleryDemo(title: 'Modal Bottom Sheet', builder: () => new ModalBottomSheetDemo()),
new GalleryDemo(title: 'Page Selector', builder: () => new PageSelectorDemo()),
new GalleryDemo(title: 'Persistent Bottom Sheet', builder: () => new PersistentBottomSheetDemo()),