diff --git a/examples/material_gallery/lib/demo/chip_demo.dart b/examples/material_gallery/lib/demo/chip_demo.dart index fbe209ae5e..c29ddd3241 100644 --- a/examples/material_gallery/lib/demo/chip_demo.dart +++ b/examples/material_gallery/lib/demo/chip_demo.dart @@ -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 { )); } - 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() -); diff --git a/examples/material_gallery/lib/demo/date_picker_demo.dart b/examples/material_gallery/lib/demo/date_picker_demo.dart index b62627e1af..9338cc7aea 100644 --- a/examples/material_gallery/lib/demo/date_picker_demo.dart +++ b/examples/material_gallery/lib/demo/date_picker_demo.dart @@ -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 { } Widget build(BuildContext context) { - return new Column( - children: [ - 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: [ + 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() -); diff --git a/examples/material_gallery/lib/demo/drop_down_demo.dart b/examples/material_gallery/lib/demo/drop_down_demo.dart index ce1609cef9..3d2a3f4f4e 100644 --- a/examples/material_gallery/lib/demo/drop_down_demo.dart +++ b/examples/material_gallery/lib/demo/drop_down_demo.dart @@ -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 { - String _value = "Free"; + String value = "Free"; - List> _buildItems() { - return ["One", "Two", "Free", "Four"].map((String value) { + List> buildItems() { + return ["One", "Two", "Free", "Four"].map((String value) { return new DropDownMenuItem(value: value, child: new Text(value)); }) .toList(); } Widget build(BuildContext context) { - Widget dropdown = new DropDownButton( - 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( + 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() -); diff --git a/examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart b/examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart index 11a43d2829..687bf35d70 100644 --- a/examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart +++ b/examples/material_gallery/lib/demo/modal_bottom_sheet_demo.dart @@ -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() -); diff --git a/examples/material_gallery/lib/demo/page_selector_demo.dart b/examples/material_gallery/lib/demo/page_selector_demo.dart index f7caf538f9..c9a50ee3f9 100644 --- a/examples/material_gallery/lib/demo/page_selector_demo.dart +++ b/examples/material_gallery/lib/demo/page_selector_demo.dart @@ -5,11 +5,7 @@ import 'package:flutter/animation.dart'; import 'package:flutter/material.dart'; -import 'widget_demo.dart'; - -final List _iconNames = ["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: [ - new Container( - margin: const EdgeDims.only(top: 16.0), - child: new Row( - children: [ - 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 iconNames = ["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: [ + new Container( + margin: const EdgeDims.only(top: 16.0), + child: new Row( + children: [ + 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() -); diff --git a/examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart b/examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart index bc023fed90..eb2ab47f65 100644 --- a/examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart +++ b/examples/material_gallery/lib/demo/persistent_bottom_sheet_demo.dart @@ -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] - ); - } -); diff --git a/examples/widgets/progress_indicator.dart b/examples/material_gallery/lib/demo/progress_indicator_demo.dart similarity index 67% rename from examples/widgets/progress_indicator.dart rename to examples/material_gallery/lib/demo/progress_indicator_demo.dart index b6171d90f2..6e95552aac 100644 --- a/examples/widgets/progress_indicator.dart +++ b/examples/material_gallery/lib/demo/progress_indicator_demo.dart @@ -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 { +class _ProgressIndicatorDemoState extends State { + void initState() { super.initState(); controller = new AnimationController( @@ -77,42 +78,22 @@ class _ProgressIndicatorAppState extends State { } 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() - } - )); -} diff --git a/examples/material_gallery/lib/demo/selection_controls_demo.dart b/examples/material_gallery/lib/demo/selection_controls_demo.dart deleted file mode 100644 index e46bce6412..0000000000 --- a/examples/material_gallery/lib/demo/selection_controls_demo.dart +++ /dev/null @@ -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 { - 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: [ - new Row( - children: [ - new Checkbox(value: _checkboxValue, onChanged: _setCheckboxValue), - new Checkbox(value: false), // Disabled - new Checkbox(value: true), // Disabled - ], - justifyContent: FlexJustifyContent.spaceAround - ), - new Row( - children: [0, 1, 2].map((int i) { - return new Radio( - value: i, - groupValue: _radioValue, - onChanged: _setRadioValue - ); - }).toList(), - justifyContent: FlexJustifyContent.spaceAround - ), - new Row( - children: [0, 1].map((int i) { - return new Radio(value: i, groupValue: 0); // Disabled - }).toList(), - justifyContent: FlexJustifyContent.spaceAround - ), - new Row( - children: [ - 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() -); diff --git a/examples/material_gallery/lib/demo/slider_demo.dart b/examples/material_gallery/lib/demo/slider_demo.dart index 846be1301c..c3243aed16 100644 --- a/examples/material_gallery/lib/demo/slider_demo.dart +++ b/examples/material_gallery/lib/demo/slider_demo.dart @@ -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 { double _value = 25.0; Widget build(BuildContext context) { - return new Block([ - new Container( - height: 100.0, - child: new Center( - child: new Row( - children: [ - 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([ + new Container( + height: 100.0, + child: new Center( + child: new Row( + children: [ + 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: [ + // 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: [ - // 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() -); diff --git a/examples/material_gallery/lib/demo/tabs_demo.dart b/examples/material_gallery/lib/demo/tabs_demo.dart index 1ba113aac6..4d474fecf2 100644 --- a/examples/material_gallery/lib/demo/tabs_demo.dart +++ b/examples/material_gallery/lib/demo/tabs_demo.dart @@ -4,47 +4,35 @@ import 'package:flutter/material.dart'; -import 'widget_demo.dart'; +class TabsDemo extends StatelessComponent { + final List iconNames = ["event", "home", "android", "alarm", "face", "language"]; -final List _iconNames = ["event", "home", "android", "alarm", "face", "language"]; - -Widget _buildTabBarSelection(_, Widget child) { - return new TabBarSelection(values: _iconNames, child: child); -} - -Widget _buildTabBar(_) { - return new TabBar( - 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 { Widget build(_) { - return new TabBarView( - children: _iconNames.map((String iconName) { - return new Container( - key: new ValueKey(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( + 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(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() -); diff --git a/examples/material_gallery/lib/demo/time_picker_demo.dart b/examples/material_gallery/lib/demo/time_picker_demo.dart index f4d39f1035..dd06afc209 100644 --- a/examples/material_gallery/lib/demo/time_picker_demo.dart +++ b/examples/material_gallery/lib/demo/time_picker_demo.dart @@ -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 { } Widget build(BuildContext context) { - return new Column( - children: [ - 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: [ + 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() -); diff --git a/examples/material_gallery/lib/demo/toggle_controls_demo.dart b/examples/material_gallery/lib/demo/toggle_controls_demo.dart new file mode 100644 index 0000000000..d7a6a91018 --- /dev/null +++ b/examples/material_gallery/lib/demo/toggle_controls_demo.dart @@ -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 { + 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: [ + new Row( + children: [ + new Checkbox(value: _checkboxValue, onChanged: _setCheckboxValue), + new Checkbox(value: false), // Disabled + new Checkbox(value: true), // Disabled + ], + justifyContent: FlexJustifyContent.spaceAround + ), + new Row( + children: [0, 1, 2].map((int i) { + return new Radio( + value: i, + groupValue: _radioValue, + onChanged: _setRadioValue + ); + }).toList(), + justifyContent: FlexJustifyContent.spaceAround + ), + new Row( + children: [0, 1].map((int i) { + return new Radio(value: i, groupValue: 0); // Disabled + }).toList(), + justifyContent: FlexJustifyContent.spaceAround + ), + new Row( + children: [ + new Switch(value: _switchValue, onChanged: _setSwitchValue), + new Switch(value: false), // Disabled + new Switch(value: true), // Disabled + ], + justifyContent: FlexJustifyContent.spaceAround + ), + ], + justifyContent: FlexJustifyContent.spaceAround + ) + ); + } +} diff --git a/examples/material_gallery/lib/demo/widget_demo.dart b/examples/material_gallery/lib/demo/widget_demo.dart deleted file mode 100644 index 1b6884b586..0000000000 --- a/examples/material_gallery/lib/demo/widget_demo.dart +++ /dev/null @@ -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; -} diff --git a/examples/material_gallery/lib/gallery_page.dart b/examples/material_gallery/lib/gallery_page.dart deleted file mode 100644 index 3335b4213e..0000000000 --- a/examples/material_gallery/lib/gallery_page.dart +++ /dev/null @@ -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 demos; - final WidgetDemo active; - final ValueChanged onThemeChanged; - - _GalleryPageState createState() => new _GalleryPageState(); -} - -class _GalleryPageState extends State { - Widget _buildDrawer() { - List items = [ - 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: [ - 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() - ) - ); - } -} diff --git a/examples/material_gallery/lib/main.dart b/examples/material_gallery/lib/main.dart index 62345aef66..30c7a248dd 100644 --- a/examples/material_gallery/lib/main.dart +++ b/examples/material_gallery/lib/main.dart @@ -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 _kDemos = [ - 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 _routes = new Map(); +class GallerySection extends StatelessComponent { + GallerySection({ this.colors, this.title, this.demos }); - void initState() { - super.initState(); - _routes['/'] = (_) => new GalleryPage( - demos: _kDemos, - onThemeChanged: _handleThemeChanged + final Map colors; + final String title; + final List 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 ?? []).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( + [ + new Row( + children: [ + new GallerySection(title: 'Animation', colors: Colors.purple), + new GallerySection(title: 'Style', colors: Colors.green) + ] + ), + new Row( + children: [ + new GallerySection(title: 'Layout', colors: Colors.pink), + new GallerySection( + title: 'Components', + colors: Colors.amber, + demos: [ + 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: [ + 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() + } + )); }