Merge pull request #1638 from HansMuller/gallery_drawer

Gallery support for light/dark theme switching, slow animation speed

examples/material_gallery/flutter.yaml

 name: material_gallery
 assets:
-  - assets/ali_connors.png
   - assets/flutter_logo.png
   - assets/section_animation.png
   - assets/section_style.png
@@ -8,6 +7,7 @@ assets:
   - assets/section_components.png
   - assets/section_patterns.png
   - assets/section_usability.png
+  - packages/flutter_gallery_assets/ali_connors.png
   - packages/flutter_gallery_assets/sun.png
   - packages/flutter_gallery_assets/clouds-0.png
   - packages/flutter_gallery_assets/clouds-1.png
@@ -19,20 +19,12 @@ assets:
   - packages/flutter_gallery_assets/icon-rain.png
   - packages/flutter_gallery_assets/icon-snow.png
 material-design-icons:
-  - name: navigation/arrow_drop_down
-  - name: navigation/arrow_forward
-  - name: navigation/arrow_back
-  - name: navigation/cancel
-  - name: navigation/expand_less
-  - name: navigation/expand_more
-  - name: navigation/menu
-  - name: navigation/more_horiz
-  - name: navigation/more_vert
-  - name: action/event
-  - name: action/home
-  - name: action/android
   - name: action/alarm
+  - name: action/android
+  - name: action/event
   - name: action/face
+  - name: action/home
+  - name: action/hourglass_empty
   - name: action/language
   - name: communication/call
   - name: communication/email
@@ -40,3 +32,14 @@ material-design-icons:
   - name: communication/message
   - name: content/add
   - name: content/create
+  - name: image/brightness_5
+  - name: image/brightness_7
+  - name: navigation/arrow_back
+  - name: navigation/arrow_drop_down
+  - name: navigation/arrow_forward
+  - name: navigation/cancel
+  - name: navigation/expand_less
+  - name: navigation/expand_more
+  - name: navigation/menu
+  - name: navigation/more_horiz
+  - name: navigation/more_vert

examples/material_gallery/lib/demo/flexible_space_demo.dart

@@ -100,7 +100,7 @@ class FlexibleSpaceDemoState extends State<FlexibleSpaceDemo> {
             return new FlexibleSpaceBar(
               title : new Text('Ali Connors'),
               image: new AssetImage(
-                name: 'assets/ali_connors.png',
+                name: 'packages/flutter_gallery_assets/ali_connors.png',
                 fit: ImageFit.cover,
                 height: appBarHeight
               )

examples/material_gallery/lib/main.dart

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';// show timeDilation;
 
 import 'demo/chip_demo.dart';
 import 'demo/date_picker_demo.dart';
@@ -48,7 +49,7 @@ class GallerySection extends StatelessComponent {
 
   void showDemos(BuildContext context) {
     final theme = new ThemeData(
-      brightness: ThemeBrightness.light,
+      brightness: Theme.of(context).brightness,
       primarySwatch: colors
     );
     final appBarHeight = 200.0;
@@ -85,40 +86,40 @@ class GallerySection extends StatelessComponent {
 
   Widget build (BuildContext context) {
     final theme = new ThemeData(
-      brightness: ThemeBrightness.dark,
+      brightness: Theme.of(context).brightness,
       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),
-            decoration: new BoxDecoration(backgroundColor: theme.primaryColor),
-            child: new Column(
-              children: <Widget>[
-                new Flexible(
-                  child: new Padding(
-                    padding: const EdgeDims.symmetric(horizontal: 12.0),
-                    child: new AssetImage(
-                      name: image,
-                      alignment: const FractionalOffset(0.5, 0.5),
-                      fit: ImageFit.contain
-                    )
-                  )
-                ),
-                new Padding(
-                  padding: const EdgeDims.all(16.0),
-                  child: new Align(
-                    alignment: const FractionalOffset(0.0, 1.0),
-                    child: new Text(title, style: theme.text.title)
+    final titleTextStyle = theme.text.title.copyWith(
+      color: theme.brightness == ThemeBrightness.dark ?  Colors.black : Colors.white
+    );
+    return new Flexible(
+      child: new GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: () { showDemos(context); },
+        child: new Container(
+          height: 256.0,
+          margin: const EdgeDims.all(4.0),
+          decoration: new BoxDecoration(backgroundColor: theme.primaryColor),
+          child: new Column(
+            children: <Widget>[
+              new Flexible(
+                child: new Padding(
+                  padding: const EdgeDims.symmetric(horizontal: 12.0),
+                  child: new AssetImage(
+                    name: image,
+                    alignment: const FractionalOffset(0.5, 0.5),
+                    fit: ImageFit.contain
                   )
                 )
-              ]
-            )
+              ),
+              new Padding(
+                padding: const EdgeDims.all(16.0),
+                child: new Align(
+                  alignment: const FractionalOffset(0.0, 1.0),
+                  child: new Text(title, style: titleTextStyle)
+                )
+              )
+            ]
           )
         )
       )
@@ -126,7 +127,20 @@ class GallerySection extends StatelessComponent {
   }
 }
 
-class GalleryHome extends StatelessComponent {
+class GalleryHome extends StatefulComponent {
+  GalleryHomeState createState() => new GalleryHomeState();
+}
+
+class GalleryHomeState extends State<GalleryHome> {
+  void _changeTheme(BuildContext context, bool value) {
+    GalleryApp.of(context).lightTheme = value;
+  }
+
+  void _toggleAnimationSpeed() {
+    setState((){
+      timeDilation = (timeDilation != 1.0) ? 1.0 : 5.0;
+    });
+  }
 
   Widget build(BuildContext context) {
     return new Scaffold(
@@ -143,6 +157,58 @@ class GalleryHome extends StatelessComponent {
           );
         }
       ),
+      drawer: new Drawer(
+        child: new Block(
+          children: <Widget>[
+            new DrawerHeader(child: new Text('Flutter Gallery')),
+            new DrawerItem(
+              icon: 'image/brightness_5',
+              onPressed: () { _changeTheme(context, true); },
+              selected: GalleryApp.of(context).lightTheme,
+              child: new Row(
+                children: <Widget>[
+                  new Flexible(child: new Text('Light')),
+                  new Radio<bool>(
+                    value: true,
+                    groupValue: GalleryApp.of(context).lightTheme,
+                    onChanged: (bool value) { _changeTheme(context, value); }
+                  )
+                ]
+              )
+            ),
+            new DrawerItem(
+              icon: 'image/brightness_7',
+              onPressed: () { _changeTheme(context, false); },
+              selected: !GalleryApp.of(context).lightTheme,
+              child: new Row(
+                children: <Widget>[
+                  new Flexible(child: new Text('Dark')),
+                  new Radio<bool>(
+                    value: false,
+                    groupValue: GalleryApp.of(context).lightTheme,
+                    onChanged: (bool value) { _changeTheme(context, value); }
+                  )
+                ]
+              )
+            ),
+            new DrawerDivider(),
+            new DrawerItem(
+              icon: 'action/hourglass_empty',
+              selected: timeDilation != 1.0,
+              onPressed: () { _toggleAnimationSpeed(); },
+              child: new Row(
+                children: <Widget>[
+                  new Flexible(child: new Text('Animate Slowly')),
+                  new Checkbox(
+                    value: timeDilation != 1.0,
+                    onChanged: (bool value) { _toggleAnimationSpeed(); }
+                  )
+                ]
+              )
+            )
+          ]
+        )
+      ),
       body: new Padding(
         padding: const EdgeDims.all(4.0),
         child: new Block(
@@ -217,11 +283,32 @@ class GalleryHome extends StatelessComponent {
   }
 }
 
+class GalleryApp extends StatefulComponent {
+  static GalleryAppState of(BuildContext context) => context.ancestorStateOfType(const TypeMatcher<GalleryAppState>());
+
+  GalleryAppState createState() => new GalleryAppState();
+}
+
+class GalleryAppState extends State<GalleryApp> {
+  bool _lightTheme = true;
+  bool get lightTheme => _lightTheme;
+  void set lightTheme(bool value) {
+    setState(() {
+      _lightTheme = value;
+    });
+  }
+
+  Widget build(BuildContext context) {
+    return new MaterialApp(
+      title: 'Flutter Material Gallery',
+      theme: lightTheme ? new ThemeData.light() : new ThemeData.dark(),
+      routes: {
+        '/': (RouteArguments args) => new GalleryHome()
+      }
+    );
+  }
+}
+
 void main() {
-  runApp(new MaterialApp(
-    title: 'Material Gallery',
-    routes: {
-      '/': (RouteArguments args) => new GalleryHome()
-    }
-  ));
+  runApp(new GalleryApp());
 }

examples/material_gallery/pubspec.yaml

@@ -6,4 +6,4 @@ dependencies:
     path: ../../packages/flutter
   flutter_sprites:
     path: ../../packages/flutter_sprites
-  flutter_gallery_assets: '0.0.2'
+  flutter_gallery_assets: '0.0.3'