Merge pull request #1252 from HansMuller/new_gallery

Revised Material Gallery demo

The demo's home page is now a grid divided into the same six sections that appear in the Material Design spec itself. Tapping on a section leads to a list of demos. Currently only the "Components" section has any demos.

All of the demos are now self-contained apps with their own Scaffold and etc.

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<ChipDemo> {
       ));
     }
 
-    return new Block(chips.map((Widget widget) {
+    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
-        )
+          child: new Center(child: widget)
+        );
+      }).toList())
     );
-    }).toList());
   }
 }
-
-final WidgetDemo kChipDemo = new WidgetDemo(
-  title: 'Chips',
-  routeName: '/chips',
-  builder: (_) => new ChipDemo()
-);

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,7 +29,10 @@ class _DatePickerDemoState extends State<DatePickerDemo> {
   }
 
   Widget build(BuildContext context) {
-    return new Column(
+    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(
@@ -40,12 +41,7 @@ class _DatePickerDemoState extends State<DatePickerDemo> {
           ),
         ],
         justifyContent: FlexJustifyContent.center
+      )
     );
   }
 }
-
-final WidgetDemo kDatePickerDemo = new WidgetDemo(
-  title: 'Date Picker',
-  routeName: '/date-picker',
-  builder: (_) => new DatePickerDemo()
-);

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<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,
+    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;
+                value = newValue;
             });
           }
+        )
+      )
     );
-
-    return new Center(child: dropdown);
   }
 }
-
-final WidgetDemo kDropDownDemo = new WidgetDemo(
-  title: 'Drop Down Button',
-  routeName: '/dropdown',
-  builder: (_) => new DropDownDemo()
-);

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,7 +11,16 @@ class ModalBottomSheetDemo extends StatelessComponent {
     textAlign: TextAlign.center
   );
 
-  void _showModalBottomSheet(BuildContext context) {
+  Widget build(BuildContext context) {
+    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(
@@ -23,23 +30,9 @@ class ModalBottomSheetDemo extends StatelessComponent {
                 );
               });
             }
-
-  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)
+          )
         )
       )
     );
   }
 }
-
-final WidgetDemo kModalBottomSheetDemo = new WidgetDemo(
-  title: 'Modal Bottom Sheet',
-  routeName: '/modalBottomSheet',
-  builder: (_) => new ModalBottomSheetDemo()
-);

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<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,8 +57,12 @@ class TabViewDemo extends StatelessComponent {
   }
 
   Widget build(BuildContext notUsed) { // Can't find the TabBarSelection from this context.
-    return new TabBarSelection(
-      values: _iconNames,
+    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(
@@ -77,7 +77,7 @@ class TabViewDemo extends StatelessComponent {
                         tooltip: 'Back'
                       ),
                       new Row(
-                      children: _iconNames.map((String name) => _buildTabIndicator(context, name)).toList(),
+                        children: iconNames.map((String name) => _buildTabIndicator(context, name)).toList(),
                         justifyContent: FlexJustifyContent.collapse
                       ),
                       new IconButton(
@@ -91,19 +91,14 @@ class TabViewDemo extends StatelessComponent {
                 ),
                 new Flexible(
                   child: new TabBarView(
-                  children: _iconNames.map(_buildTabView).toList()
+                    children: iconNames.map(_buildTabView).toList()
                   )
                 )
               ]
             );
           }
         )
+      )
     );
   }
 }
-
-final WidgetDemo kPageSelectorDemo = new WidgetDemo(
-  title: 'Page Selector',
-  routeName: '/page-selector',
-  builder: (_) => new TabViewDemo()
-);

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) {
+  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); },
+                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]
+      )
     );
   }
-);
+}

examples/widgets/progress_indicator.dart → 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<ProgressIndicatorApp> {
+class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo> {
+
   void initState() {
     super.initState();
     controller = new AnimationController(
@@ -77,8 +78,13 @@ class _ProgressIndicatorAppState extends State<ProgressIndicatorApp> {
   }
 
   Widget build(BuildContext context) {
-    Widget body = new GestureDetector(
+    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(
@@ -86,33 +92,8 @@ class _ProgressIndicatorAppState extends State<ProgressIndicatorApp> {
               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
-          )
         )
       )
     );
   }
 }
-
-void main() {
-  runApp(new MaterialApp(
-    title: 'Progress Indicators',
-    routes: {
-      '/': (RouteArguments args) => new ProgressIndicatorApp()
-    }
-  ));
-}

examples/material_gallery/lib/demo/selection_controls_demo.dart

-// 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()
-);

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,7 +12,9 @@ class _SliderDemoState extends State<SliderDemo> {
   double _value = 25.0;
 
   Widget build(BuildContext context) {
-    return new Block([
+    return new Scaffold(
+      toolBar: new ToolBar(center: new Text("Sliders")),
+      body: new Block(<Widget>[
         new Container(
           height: 100.0,
           child: new Center(
@@ -55,13 +55,7 @@ class _SliderDemoState extends State<SliderDemo> {
             )
           )
         )
-
-    ]);
+      ])
+    );
   }
 }
-
-final WidgetDemo kSliderDemo = new WidgetDemo(
-  title: 'Sliders',
-  routeName: '/sliders',
-  builder: (_) => new SliderDemo()
-);

examples/material_gallery/lib/demo/tabs_demo.dart

@@ -4,31 +4,25 @@
 
 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>(
+  Widget build(_) {
+    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"))
-  );
-}
-
-class TabsDemo extends StatefulComponent {
-  _TabsDemoState createState() => new _TabsDemoState();
-}
-
-class _TabsDemoState extends State<TabsDemo> {
-  Widget build(_) {
-    return new TabBarView(
-      children: _iconNames.map((String iconName) {
+              iconNames,
+              value: (String iconName) => new TabLabel(text: iconName, icon: "action/$iconName")
+            )
+          )
+        ),
+        body: new TabBarView(
+          children: iconNames.map((String iconName) {
             return new Container(
               key: new ValueKey<String>(iconName),
               padding: const EdgeDims.all(12.0),
@@ -37,14 +31,8 @@ class _TabsDemoState extends State<TabsDemo> {
               )
             );
           }).toList()
+        )
+      )
     );
   }
 }
-
-final WidgetDemo kTabsDemo = new WidgetDemo(
-  title: 'Tabs',
-  routeName: '/tabs',
-  tabBarBuilder: _buildTabBar,
-  pageWrapperBuilder: _buildTabBarSelection,
-  builder: (_) => new TabsDemo()
-);

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,7 +26,9 @@ class _TimePickerDemoState extends State<TimePickerDemo> {
   }
 
   Widget build(BuildContext context) {
-    return new Column(
+    return new Scaffold(
+      toolBar: new ToolBar(center: new Text("Time Picker")),
+      body: new Column(
         children: <Widget>[
           new Text('$_selectedTime'),
           new RaisedButton(
@@ -37,12 +37,7 @@ class _TimePickerDemoState extends State<TimePickerDemo> {
           ),
         ],
         justifyContent: FlexJustifyContent.center
+      )
     );
   }
 }
-
-final WidgetDemo kTimePickerDemo = new WidgetDemo(
-  title: 'Time Picker',
-  routeName: '/time-picker',
-  builder: (_) => new TimePickerDemo()
-);

examples/material_gallery/lib/demo/toggle_controls_demo.dart

+// 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
+      )
+    );
+  }
+}

examples/material_gallery/lib/demo/widget_demo.dart

-// 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;
-}

examples/material_gallery/lib/gallery_page.dart

-// 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()
-      )
-    );
-  }
-}

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<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 });
+
+  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 initState() {
-    super.initState();
-    _routes['/'] = (_) => new GalleryPage(
-      demos: _kDemos,
-      onThemeChanged: _handleThemeChanged
+  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()
+    }
+  ));
 }