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

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

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

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

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,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
-                )
-              ),
-              new Flexible(
-                child: new TabBarView(
-                  children: _iconNames.map(_buildTabView).toList()
+    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()
+                  )
                 )
-              )
-            ]
-          );
-        }
+              ]
+            );
+          }
+        )
       )
     );
   }
 }
-
-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) {
-    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]
-    );
-  }
-);

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

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

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

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

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