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

Revised Material Gallery demo

Browse Source
This commit is contained in:
Hans Muller 2016-01-14 17:13:40 -08:00
parent 50937d1f03
commit 3f0cca02cb
15 changed files with 424 additions and 532 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
examples/material_gallery/lib/demo/chip_demo.dart
View File

@ -4,8 +4,6 @@
import 'package:flutter/material.dart';
import 'widget_demo.dart';
class ChipDemo extends StatefulComponent {
_ChipDemoState createState() => new _ChipDemoState();
}
@ -37,19 +35,14 @@ class _ChipDemoState extends State<ChipDemo> {
));
}
return new Block(chips.map((Widget widget) {
return new Container(
height: 100.0,
child: new Center(
child: widget
)
);
}).toList());
return new Scaffold(
toolBar: new ToolBar(center: new Text("Chips")),
body: new Block(chips.map((Widget widget) {
return new Container(
height: 100.0,
child: new Center(child: widget)
);
}).toList())
);
}
}
final WidgetDemo kChipDemo = new WidgetDemo(
title: 'Chips',
routeName: '/chips',
builder: (_) => new ChipDemo()
);

30
examples/material_gallery/lib/demo/date_picker_demo.dart
View File

@ -7,8 +7,6 @@ import 'dart:async';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'widget_demo.dart';
class DatePickerDemo extends StatefulComponent {
_DatePickerDemoState createState() => new _DatePickerDemoState();
}
@ -31,21 +29,19 @@ class _DatePickerDemoState extends State<DatePickerDemo> {
}
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new Text(new DateFormat.yMMMd().format(_selectedDate)),
new RaisedButton(
onPressed: _handleSelectDate,
child: new Text('SELECT DATE')
),
],
justifyContent: FlexJustifyContent.center
return
new Scaffold(
toolBar: new ToolBar(center: new Text("Date Picker")),
body: new Column(
children: <Widget>[
new Text(new DateFormat.yMMMd().format(_selectedDate)),
new RaisedButton(
onPressed: _handleSelectDate,
child: new Text('SELECT DATE')
),
],
justifyContent: FlexJustifyContent.center
)
);
}
}
final WidgetDemo kDatePickerDemo = new WidgetDemo(
title: 'Date Picker',
routeName: '/date-picker',
builder: (_) => new DatePickerDemo()
);

39
examples/material_gallery/lib/demo/drop_down_demo.dart
View File

@ -4,40 +4,35 @@
import 'package:flutter/material.dart';
import 'widget_demo.dart';
class DropDownDemo extends StatefulComponent {
_DropDownDemoState createState() => new _DropDownDemoState();
}
class _DropDownDemoState extends State<DropDownDemo> {
String _value = "Free";
String value = "Free";
List<DropDownMenuItem<String>> _buildItems() {
return ["One", "Two", "Free", "Four"].map((String value) {
List<DropDownMenuItem<String>> buildItems() {
return <String>["One", "Two", "Free", "Four"].map((String value) {
return new DropDownMenuItem<String>(value: value, child: new Text(value));
})
.toList();
}
Widget build(BuildContext context) {
Widget dropdown = new DropDownButton<String>(
items: _buildItems(),
value: _value,
onChanged: (String newValue) {
setState(() {
if (newValue != null)
_value = newValue;
});
}
return new Scaffold(
toolBar: new ToolBar(center: new Text("Dropdown Button")),
body: new Center(
child: new DropDownButton<String>(
items: buildItems(),
value: value,
onChanged: (String newValue) {
setState(() {
if (newValue != null)
value = newValue;
});
}
)
)
);
return new Center(child: dropdown);
}
}
final WidgetDemo kDropDownDemo = new WidgetDemo(
title: 'Drop Down Button',
routeName: '/dropdown',
builder: (_) => new DropDownDemo()
);

45
examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart
View File

@ -4,8 +4,6 @@
import 'package:flutter/material.dart';
import 'widget_demo.dart';
class ModalBottomSheetDemo extends StatelessComponent {
final TextStyle textStyle = new TextStyle(
color: Colors.indigo[400],
@ -13,33 +11,28 @@ class ModalBottomSheetDemo extends StatelessComponent {
textAlign: TextAlign.center
);
void _showModalBottomSheet(BuildContext context) {
showModalBottomSheet(context: context, builder: (_) {
return new Container(
child: new Padding(
padding: const EdgeDims.all(32.0),
child: new Text("This is the modal bottom sheet. Click anywhere to dismiss.", style: textStyle)
)
);
});
}
Widget build(BuildContext context) {
return new Center(
child: new Container(
width: 200.0,
height: 200.0,
child: new RaisedButton(
onPressed: () { _showModalBottomSheet(context); },
child: new Text('Show the modal bottom sheet', style: textStyle)
return new Scaffold(
toolBar: new ToolBar(center: new Text("Modal Bottom Sheet")),
body: new Center(
child: new Container(
width: 200.0,
height: 200.0,
child: new RaisedButton(
child: new Text('Show the modal bottom sheet', style: textStyle),
onPressed: () {
showModalBottomSheet(context: context, builder: (_) {
return new Container(
child: new Padding(
padding: const EdgeDims.all(32.0),
child: new Text("This is the modal bottom sheet. Click anywhere to dismiss.", style: textStyle)
)
);
});
}
)
)
)
);
}
}
final WidgetDemo kModalBottomSheetDemo = new WidgetDemo(
title: 'Modal Bottom Sheet',
routeName: '/modalBottomSheet',
builder: (_) => new ModalBottomSheetDemo()
);

87
examples/material_gallery/lib/demo/page_selector_demo.dart
View File

@ -5,11 +5,7 @@
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'widget_demo.dart';
final List<String> _iconNames = <String>["event", "home", "android", "alarm", "face", "language"];
class TabViewDemo extends StatelessComponent {
class PageSelectorDemo extends StatelessComponent {
Widget _buildTabIndicator(BuildContext context, String iconName) {
final Color color = Theme.of(context).primaryColor;
final ColorTween _selectedColor = new ColorTween(begin: Colors.transparent, end: color);
@ -61,49 +57,48 @@ class TabViewDemo extends StatelessComponent {
}
Widget build(BuildContext notUsed) { // Can't find the TabBarSelection from this context.
return new TabBarSelection(
values: _iconNames,
child: new Builder(
builder: (BuildContext context) {
return new Column(
children: <Widget>[
new Container(
margin: const EdgeDims.only(top: 16.0),
child: new Row(
children: <Widget>[
new IconButton(
icon: "navigation/arrow_back",
onPressed: () { _handleArrowButtonPress(context, -1); },
tooltip: 'Back'
),
new Row(
children: _iconNames.map((String name) => _buildTabIndicator(context, name)).toList(),
justifyContent: FlexJustifyContent.collapse
),
new IconButton(
icon: "navigation/arrow_forward",
onPressed: () { _handleArrowButtonPress(context, 1); },
tooltip: 'Forward'
)
],
justifyContent: FlexJustifyContent.spaceBetween
final List<String> iconNames = <String>["event", "home", "android", "alarm", "face", "language"];
return new Scaffold(
toolBar: new ToolBar(center: new Text("Page Selector")),
body: new TabBarSelection(
values: iconNames,
child: new Builder(
builder: (BuildContext context) {
return new Column(
children: <Widget>[
new Container(
margin: const EdgeDims.only(top: 16.0),
child: new Row(
children: <Widget>[
new IconButton(
icon: "navigation/arrow_back",
onPressed: () { _handleArrowButtonPress(context, -1); },
tooltip: 'Back'
),
new Row(
children: iconNames.map((String name) => _buildTabIndicator(context, name)).toList(),
justifyContent: FlexJustifyContent.collapse
),
new IconButton(
icon: "navigation/arrow_forward",
onPressed: () { _handleArrowButtonPress(context, 1); },
tooltip: 'Forward'
)
],
justifyContent: FlexJustifyContent.spaceBetween
)
),
new Flexible(
child: new TabBarView(
children: iconNames.map(_buildTabView).toList()
)
)
),
new Flexible(
child: new TabBarView(
children: _iconNames.map(_buildTabView).toList()
)
)
]
);
}
]
);
}
)
)
);
}
}
final WidgetDemo kPageSelectorDemo = new WidgetDemo(
title: 'Page Selector',
routeName: '/page-selector',
builder: (_) => new TabViewDemo()
);

45
examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart
View File

@ -4,8 +4,6 @@
import 'package:flutter/material.dart';
import 'widget_demo.dart';
class PersistentBottomSheetDemo extends StatelessComponent {
final TextStyle textStyle = new TextStyle(
@ -14,7 +12,7 @@ class PersistentBottomSheetDemo extends StatelessComponent {
textAlign: TextAlign.center
);
void _showBottomSheet(BuildContext context) {
void showBottomSheet(BuildContext context) {
Scaffold.of(context).showBottomSheet((_) {
return new Container(
decoration: new BoxDecoration(
@ -28,28 +26,27 @@ class PersistentBottomSheetDemo extends StatelessComponent {
});
}
Widget build(BuildContext context) {
return new Center(
child: new Container(
width: 200.0,
height: 200.0,
child: new RaisedButton(
onPressed: () { _showBottomSheet(context); },
child: new Text('Show the persistent bottom sheet', style: textStyle)
)
Widget build(BuildContext notUsed) { // Can't find the Scaffold from this context.
return new Scaffold(
toolBar: new ToolBar(center: new Text("Persistent Bottom Sheet")),
floatingActionButton: new FloatingActionButton(
child: new Icon(icon: 'content/add'),
backgroundColor: Colors.redAccent[200]
),
body: new Builder(
builder: (BuildContext context) {
return new Center(
child: new Container(
width: 200.0,
height: 200.0,
child: new RaisedButton(
onPressed: () { showBottomSheet(context); },
child: new Text('Show the persistent bottom sheet', style: textStyle)
)
)
);
}
)
);
}
}
final WidgetDemo kPersistentBottomSheetDemo = new WidgetDemo(
title: 'Persistent Bottom Sheet',
routeName: '/persistentBottomSheet',
builder: (_) => new PersistentBottomSheetDemo(),
floatingActionButtonBuilder: (_) {
return new FloatingActionButton(
child: new Icon(icon: 'content/add'),
backgroundColor: Colors.redAccent[200]
);
}
);

53
examples/widgets/progress_indicator.dart → examples/material_gallery/lib/demo/progress_indicator_demo.dart
View File

@ -5,11 +5,12 @@
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
class ProgressIndicatorApp extends StatefulComponent {
_ProgressIndicatorAppState createState() => new _ProgressIndicatorAppState();
class ProgressIndicatorDemo extends StatefulComponent {
_ProgressIndicatorDemoState createState() => new _ProgressIndicatorDemoState();
}
class _ProgressIndicatorAppState extends State<ProgressIndicatorApp> {
class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo> {
void initState() {
super.initState();
controller = new AnimationController(
@ -77,42 +78,22 @@ class _ProgressIndicatorAppState extends State<ProgressIndicatorApp> {
}
Widget build(BuildContext context) {
Widget body = new GestureDetector(
onTap: handleTap,
child: new Container(
padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0),
child: new AnimationWatchingBuilder(
watchable: animation,
builder: buildIndicators
)
)
);
return new IconTheme(
data: const IconThemeData(color: IconThemeColor.white),
child: new Theme(
data: new ThemeData(
brightness: ThemeBrightness.light,
primarySwatch: Colors.blue,
accentColor: Colors.redAccent[200]
),
child: new Scaffold(
toolBar: new ToolBar(center: new Text('Progress Indicators')),
body: new DefaultTextStyle(
style: Theme.of(context).text.title,
child: body
return new Scaffold(
toolBar: new ToolBar(center: new Text('Progress Indicators')),
body: new DefaultTextStyle(
style: Theme.of(context).text.title,
child: new GestureDetector(
onTap: handleTap,
behavior: HitTestBehavior.opaque,
child: new Container(
padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0),
child: new AnimationWatchingBuilder(
watchable: animation,
builder: buildIndicators
)
)
)
)
);
}
}
void main() {
runApp(new MaterialApp(
title: 'Progress Indicators',
routes: {
'/': (RouteArguments args) => new ProgressIndicatorApp()
}
));
}

81
examples/material_gallery/lib/demo/selection_controls_demo.dart
View File

@ -1,81 +0,0 @@
// Copyright 2015 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';
import 'widget_demo.dart';
class SelectionControlsDemo extends StatefulComponent {
_SelectionControlsDemoState createState() => new _SelectionControlsDemoState();
}
class _SelectionControlsDemoState extends State<SelectionControlsDemo> {
bool _checkboxValue = false;
int _radioValue = 0;
bool _switchValue = false;
void _setCheckboxValue(bool value) {
setState(() {
_checkboxValue = value;
});
}
void _setRadioValue(int value) {
setState(() {
_radioValue = value;
});
}
void _setSwitchValue(bool value) {
setState(() {
_switchValue = value;
});
}
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Checkbox(value: _checkboxValue, onChanged: _setCheckboxValue),
new Checkbox(value: false), // Disabled
new Checkbox(value: true), // Disabled
],
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <int>[0, 1, 2].map((int i) {
return new Radio<int>(
value: i,
groupValue: _radioValue,
onChanged: _setRadioValue
);
}).toList(),
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <int>[0, 1].map((int i) {
return new Radio<int>(value: i, groupValue: 0); // Disabled
}).toList(),
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <Widget>[
new Switch(value: _switchValue, onChanged: _setSwitchValue),
new Switch(value: false), // Disabled
new Switch(value: true), // Disabled
],
justifyContent: FlexJustifyContent.spaceAround
),
],
justifyContent: FlexJustifyContent.spaceAround
);
}
}
final WidgetDemo kSelectionControlsDemo = new WidgetDemo(
title: 'Selection Controls',
routeName: '/selection-controls',
builder: (_) => new SelectionControlsDemo()
);

92
examples/material_gallery/lib/demo/slider_demo.dart
View File

@ -4,8 +4,6 @@
import 'package:flutter/material.dart';
import 'widget_demo.dart';
class SliderDemo extends StatefulComponent {
_SliderDemoState createState() => new _SliderDemoState();
}
@ -14,54 +12,50 @@ class _SliderDemoState extends State<SliderDemo> {
double _value = 25.0;
Widget build(BuildContext context) {
return new Block([
new Container(
height: 100.0,
child: new Center(
child: new Row(
children: <Widget>[
new Slider(
value: _value,
min: 0.0,
max: 100.0,
onChanged: (double value) {
setState(() {
_value = value;
});
}
),
new Container(
padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Text(_value.round().toString().padLeft(3, '0'))
),
],
justifyContent: FlexJustifyContent.collapse
return new Scaffold(
toolBar: new ToolBar(center: new Text("Sliders")),
body: new Block(<Widget>[
new Container(
height: 100.0,
child: new Center(
child: new Row(
children: <Widget>[
new Slider(
value: _value,
min: 0.0,
max: 100.0,
onChanged: (double value) {
setState(() {
_value = value;
});
}
),
new Container(
padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Text(_value.round().toString().padLeft(3, '0'))
),
],
justifyContent: FlexJustifyContent.collapse
)
)
),
new Container(
height: 100.0,
child: new Center(
child: new Row(
children: <Widget>[
// Disabled, but tracking the slider above.
new Slider(value: _value / 100.0),
new Container(
padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Text((_value / 100.0).toStringAsFixed(2))
),
],
justifyContent: FlexJustifyContent.collapse
)
)
)
),
new Container(
height: 100.0,
child: new Center(
child: new Row(
children: <Widget>[
// Disabled, but tracking the slider above.
new Slider(value: _value / 100.0),
new Container(
padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Text((_value / 100.0).toStringAsFixed(2))
),
],
justifyContent: FlexJustifyContent.collapse
)
)
)
]);
])
);
}
}
final WidgetDemo kSliderDemo = new WidgetDemo(
title: 'Sliders',
routeName: '/sliders',
builder: (_) => new SliderDemo()
);

64
examples/material_gallery/lib/demo/tabs_demo.dart
View File

@ -4,47 +4,35 @@
import 'package:flutter/material.dart';
import 'widget_demo.dart';
class TabsDemo extends StatelessComponent {
final List<String> iconNames = <String>["event", "home", "android", "alarm", "face", "language"];
final List<String> _iconNames = <String>["event", "home", "android", "alarm", "face", "language"];
Widget _buildTabBarSelection(_, Widget child) {
return new TabBarSelection<String>(values: _iconNames, child: child);
}
Widget _buildTabBar(_) {
return new TabBar<String>(
isScrollable: true,
labels: new Map.fromIterable(
_iconNames,
value: (String iconName) => new TabLabel(text: iconName, icon: "action/$iconName"))
);
}
class TabsDemo extends StatefulComponent {
_TabsDemoState createState() => new _TabsDemoState();
}
class _TabsDemoState extends State<TabsDemo> {
Widget build(_) {
return new TabBarView(
children: _iconNames.map((String iconName) {
return new Container(
key: new ValueKey<String>(iconName),
padding: const EdgeDims.all(12.0),
child: new Card(
child: new Center(child: new Icon(icon: "action/$iconName", size:IconSize.s48))
return new TabBarSelection(
values: iconNames,
child: new Scaffold(
toolBar: new ToolBar(
center: new Text("Scrollable Tabs"),
tabBar: new TabBar<String>(
isScrollable: true,
labels: new Map.fromIterable(
iconNames,
value: (String iconName) => new TabLabel(text: iconName, icon: "action/$iconName")
)
)
);
}).toList()
),
body: new TabBarView(
children: iconNames.map((String iconName) {
return new Container(
key: new ValueKey<String>(iconName),
padding: const EdgeDims.all(12.0),
child: new Card(
child: new Center(child: new Icon(icon: "action/$iconName", size:IconSize.s48))
)
);
}).toList()
)
)
);
}
}
final WidgetDemo kTabsDemo = new WidgetDemo(
title: 'Tabs',
routeName: '/tabs',
tabBarBuilder: _buildTabBar,
pageWrapperBuilder: _buildTabBarSelection,
builder: (_) => new TabsDemo()
);

29
examples/material_gallery/lib/demo/time_picker_demo.dart
View File

@ -6,8 +6,6 @@ import 'dart:async';
import 'package:flutter/material.dart';
import 'widget_demo.dart';
class TimePickerDemo extends StatefulComponent {
_TimePickerDemoState createState() => new _TimePickerDemoState();
}
@ -28,21 +26,18 @@ class _TimePickerDemoState extends State<TimePickerDemo> {
}
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new Text('$_selectedTime'),
new RaisedButton(
onPressed: _handleSelectTime,
child: new Text('SELECT TIME')
),
],
justifyContent: FlexJustifyContent.center
return new Scaffold(
toolBar: new ToolBar(center: new Text("Time Picker")),
body: new Column(
children: <Widget>[
new Text('$_selectedTime'),
new RaisedButton(
onPressed: _handleSelectTime,
child: new Text('SELECT TIME')
),
],
justifyContent: FlexJustifyContent.center
)
);
}
}
final WidgetDemo kTimePickerDemo = new WidgetDemo(
title: 'Time Picker',
routeName: '/time-picker',
builder: (_) => new TimePickerDemo()
);

76
examples/material_gallery/lib/demo/toggle_controls_demo.dart Normal file
View File

@ -0,0 +1,76 @@
// Copyright 2015 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 ToggleControlsDemo extends StatefulComponent {
_ToggleControlsDemoState createState() => new _ToggleControlsDemoState();
}
class _ToggleControlsDemoState extends State<ToggleControlsDemo> {
bool _checkboxValue = false;
int _radioValue = 0;
bool _switchValue = false;
void _setCheckboxValue(bool value) {
setState(() {
_checkboxValue = value;
});
}
void _setRadioValue(int value) {
setState(() {
_radioValue = value;
});
}
void _setSwitchValue(bool value) {
setState(() {
_switchValue = value;
});
}
Widget build(BuildContext context) {
return new Scaffold(
toolBar: new ToolBar(center: new Text("Selection Controls")),
body: new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Checkbox(value: _checkboxValue, onChanged: _setCheckboxValue),
new Checkbox(value: false), // Disabled
new Checkbox(value: true), // Disabled
],
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <int>[0, 1, 2].map((int i) {
return new Radio<int>(
value: i,
groupValue: _radioValue,
onChanged: _setRadioValue
);
}).toList(),
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <int>[0, 1].map((int i) {
return new Radio<int>(value: i, groupValue: 0); // Disabled
}).toList(),
justifyContent: FlexJustifyContent.spaceAround
),
new Row(
children: <Widget>[
new Switch(value: _switchValue, onChanged: _setSwitchValue),
new Switch(value: false), // Disabled
new Switch(value: true), // Disabled
],
justifyContent: FlexJustifyContent.spaceAround
),
],
justifyContent: FlexJustifyContent.spaceAround
)
);
}
}

25
examples/material_gallery/lib/demo/widget_demo.dart
View File

@ -1,25 +0,0 @@
// Copyright 2015 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';
typedef Widget PageWrapperBuilder(BuildContext context, Widget child);
class WidgetDemo {
WidgetDemo({
this.title,
this.routeName,
this.tabBarBuilder,
this.pageWrapperBuilder,
this.floatingActionButtonBuilder,
this.builder
});
final String title;
final String routeName;
final WidgetBuilder tabBarBuilder;
final PageWrapperBuilder pageWrapperBuilder;
final WidgetBuilder floatingActionButtonBuilder;
final WidgetBuilder builder;
}

91
examples/material_gallery/lib/gallery_page.dart
View File

@ -1,91 +0,0 @@
// Copyright 2015 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';
import 'demo/widget_demo.dart';
class GalleryPage extends StatefulComponent {
GalleryPage({ this.demos, this.active, this.onThemeChanged });
final List<WidgetDemo> demos;
final WidgetDemo active;
final ValueChanged<ThemeData> onThemeChanged;
_GalleryPageState createState() => new _GalleryPageState();
}
class _GalleryPageState extends State<GalleryPage> {
Widget _buildDrawer() {
List<Widget> items = <Widget>[
new DrawerHeader(child: new Text('Flutter Material demos')),
];
for (WidgetDemo demo in config.demos) {
items.add(new DrawerItem(
onPressed: () {
Navigator.pushNamed(context, demo.routeName);
},
child: new Text(demo.title)
));
}
// TODO(eseidel): We should make this into a shared DrawerFooter.
items.add(new DrawerDivider());
items.add(new DrawerItem(child: new Flex(
children: <Widget>[
new Text("Made with Flutter "),
new Container(
margin: const EdgeDims.symmetric(horizontal: 5.0),
child: new AssetImage(
name: 'assets/flutter_logo.png',
height: 16.0,
fit: ImageFit.contain
)
)
]
)));
return new Drawer(child: new Block(items));
}
Widget _buildBody() {
if (config.active != null)
return config.active.builder(context);
return new Material(
child: new Center(
child: new Text('Select a demo from the drawer')
)
);
}
Widget _buildTabBar() {
final WidgetBuilder builder = config.active?.tabBarBuilder;
return builder != null ? builder(context) : null;
}
Widget _buildPageWrapper(BuildContext context, Widget child) {
final PageWrapperBuilder builder = config.active?.pageWrapperBuilder;
return builder != null ? builder(context, child) : child;
}
Widget _buildFloatingActionButton() {
final WidgetBuilder builder = config.active?.floatingActionButtonBuilder;
return builder != null ? builder(context) : null;
}
Widget build(BuildContext context) {
return _buildPageWrapper(context,
new Scaffold(
toolBar: new ToolBar(
center: new Text(config.active?.title ?? 'Flutter Material gallery'),
tabBar: _buildTabBar()
),
drawer: _buildDrawer(),
floatingActionButton: _buildFloatingActionButton(),
body: _buildBody()
)
);
}
}

174
examples/material_gallery/lib/main.dart
View File

@ -8,69 +8,155 @@ import 'demo/chip_demo.dart';
import 'demo/date_picker_demo.dart';
import 'demo/drop_down_demo.dart';
import 'demo/modal_bottom_sheet_demo.dart';
import 'demo/page_selector_demo.dart';
import 'demo/persistent_bottom_sheet_demo.dart';
import 'demo/selection_controls_demo.dart';
import 'demo/progress_indicator_demo.dart';
import 'demo/toggle_controls_demo.dart';
import 'demo/slider_demo.dart';
import 'demo/tabs_demo.dart';
import 'demo/page_selector_demo.dart';
import 'demo/time_picker_demo.dart';
import 'demo/widget_demo.dart';
import 'gallery_page.dart';
final List<WidgetDemo> _kDemos = <WidgetDemo>[
kChipDemo,
kSelectionControlsDemo,
kSliderDemo,
kDatePickerDemo,
kTabsDemo,
kPageSelectorDemo,
kTimePickerDemo,
kDropDownDemo,
kModalBottomSheetDemo,
kPersistentBottomSheetDemo,
];
class GalleryDemo {
GalleryDemo({ this.title, this.builder });
class _MaterialGallery extends StatefulComponent {
_MaterialGalleryState createState() => new _MaterialGalleryState();
final String title;
final WidgetBuilder builder;
}
class _MaterialGalleryState extends State<_MaterialGallery> {
final Map<String, RouteBuilder> _routes = new Map<String, RouteBuilder>();
class GallerySection extends StatelessComponent {
GallerySection({ this.colors, this.title, this.demos });
void initState() {
super.initState();
_routes['/'] = (_) => new GalleryPage(
demos: _kDemos,
onThemeChanged: _handleThemeChanged
final Map<int, Color> colors;
final String title;
final List<GalleryDemo> demos;
void showDemo(GalleryDemo demo, BuildContext context, ThemeData theme) {
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) {
Widget child = (demo.builder == null) ? null : demo.builder(context);
return new Theme(data: theme, child: child);
}
));
}
void showDemos(BuildContext context) {
final theme = new ThemeData(
brightness: ThemeBrightness.light,
primarySwatch: colors
);
for (WidgetDemo demo in _kDemos) {
_routes[demo.routeName] = (_) {
return new GalleryPage(
demos: _kDemos,
active: demo,
onThemeChanged: _handleThemeChanged
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) {
return new Theme(
data: theme,
child: new Scaffold(
toolBar: new ToolBar(center: new Text(title)),
body: new Material(
child: new MaterialList(
type: MaterialListType.oneLine,
children: (demos ?? <GalleryDemo>[]).map((GalleryDemo demo) {
return new ListItem(
center: new Text(demo.title, style: theme.text.subhead),
onTap: () { showDemo(demo, context, theme); }
);
})
)
)
)
);
};
}
}
));
}
ThemeData _theme;
void _handleThemeChanged(ThemeData newTheme) {
setState(() {
_theme = newTheme;
});
Widget build (BuildContext context) {
final theme = new ThemeData(
brightness: ThemeBrightness.dark,
primarySwatch: colors
);
return new Theme(
data: theme,
child: new Flexible(
child: new GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () { showDemos(context); },
child: new Container(
height: 256.0,
margin: const EdgeDims.all(4.0),
padding: const EdgeDims.only(left: 16.0, bottom: 16.0),
decoration: new BoxDecoration(backgroundColor: theme.primaryColor),
child: new Align(
alignment: const FractionalOffset(0.0, 1.0),
child: new Text(title, style: theme.text.title)
)
)
)
)
);
}
}
class GalleryHome extends StatelessComponent {
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Material Gallery',
theme: _theme,
routes: _routes
return new Scaffold(
toolBar: new ToolBar(
bottom: new Container(
padding: const EdgeDims.only(left: 16.0, bottom: 24.0),
child: new Align(
alignment: const FractionalOffset(0.0, 1.0),
child: new Text('Flutter Gallery', style: Typography.white.headline)
)
)
),
body: new Padding(
padding: const EdgeDims.all(4.0),
child: new Block(
<Widget>[
new Row(
children: <Widget>[
new GallerySection(title: 'Animation', colors: Colors.purple),
new GallerySection(title: 'Style', colors: Colors.green)
]
),
new Row(
children: <Widget>[
new GallerySection(title: 'Layout', colors: Colors.pink),
new GallerySection(
title: 'Components',
colors: Colors.amber,
demos: <GalleryDemo>[
new GalleryDemo(title: 'Modal Bottom Sheet', builder: (_) => new ModalBottomSheetDemo()),
new GalleryDemo(title: 'Persistent Bottom Sheet', builder: (_) => new PersistentBottomSheetDemo()),
new GalleryDemo(title: 'Chips', builder: (_) => new ChipDemo()),
new GalleryDemo(title: 'Progress Indicators', builder: (_) => new ProgressIndicatorDemo()),
new GalleryDemo(title: 'Sliders', builder: (_) => new SliderDemo()),
new GalleryDemo(title: 'Toggle Controls', builder: (_) => new ToggleControlsDemo()),
new GalleryDemo(title: 'Dropdown Button', builder: (_) => new DropDownDemo()),
new GalleryDemo(title: 'Tabs', builder: (_) => new TabsDemo()),
new GalleryDemo(title: 'Page Selector', builder: (_) => new PageSelectorDemo()),
new GalleryDemo(title: 'Date Picker', builder: (_) => new DatePickerDemo()),
new GalleryDemo(title: 'Time Picker', builder: (_) => new TimePickerDemo())
]
)
]
),
new Row(
children: <Widget>[
new GallerySection(title: 'Pattern', colors: Colors.cyan),
new GallerySection(title: 'Usability', colors: Colors.lightGreen)
]
)
]
)
)
);
}
}
void main() {
runApp(new _MaterialGallery());
runApp(new MaterialApp(
title: 'Material Gallery',
routes: {
'/': (RouteArguments args) => new GalleryHome()
}
));
}