Added an additional Material theme to the Gallery (#15492)

examples/flutter_gallery/lib/gallery/app.dart

@@ -10,18 +10,9 @@ import 'package:flutter/scheduler.dart' show timeDilation;
 
 import 'home.dart';
 import 'item.dart';
+import 'theme.dart';
 import 'updates.dart';
 
-final ThemeData _kGalleryLightTheme = new ThemeData(
-  brightness: Brightness.light,
-  primarySwatch: Colors.blue,
-);
-
-final ThemeData _kGalleryDarkTheme = new ThemeData(
-  brightness: Brightness.dark,
-  primarySwatch: Colors.blue,
-);
-
 class GalleryApp extends StatefulWidget {
   const GalleryApp({
     this.updateUrlFetcher,
@@ -47,7 +38,7 @@ class GalleryApp extends StatefulWidget {
 }
 
 class GalleryAppState extends State<GalleryApp> {
-  bool _useLightTheme = true;
+  GalleryTheme _galleryTheme = kAllGalleryThemes[0];
   bool _showPerformanceOverlay = false;
   bool _checkerboardRasterCacheImages = false;
   bool _checkerboardOffscreenLayers = false;
@@ -87,10 +78,10 @@ class GalleryAppState extends State<GalleryApp> {
   @override
   Widget build(BuildContext context) {
     Widget home = new GalleryHome(
-      useLightTheme: _useLightTheme,
-      onThemeChanged: (bool value) {
+      galleryTheme: _galleryTheme,
+      onThemeChanged: (GalleryTheme value) {
         setState(() {
-          _useLightTheme = value;
+          _galleryTheme = value;
         });
       },
       showPerformanceOverlay: _showPerformanceOverlay,
@@ -138,7 +129,7 @@ class GalleryAppState extends State<GalleryApp> {
       onTextScaleFactorChanged: (double value) {
         setState(() {
           _textScaleFactor = value;
-        });
+         });
       },
       overrideDirection: _overrideDirection,
       onOverrideDirectionChanged: (TextDirection value) {
@@ -169,7 +160,7 @@ class GalleryAppState extends State<GalleryApp> {
     return new MaterialApp(
       title: 'Flutter Gallery',
       color: Colors.grey,
-      theme: (_useLightTheme ? _kGalleryLightTheme : _kGalleryDarkTheme).copyWith(platform: _platform ?? defaultTargetPlatform),
+      theme: _galleryTheme.theme.copyWith(platform: _platform ?? defaultTargetPlatform),
       showPerformanceOverlay: _showPerformanceOverlay,
       checkerboardRasterCacheImages: _checkerboardRasterCacheImages,
       checkerboardOffscreenLayers: _checkerboardOffscreenLayers,

examples/flutter_gallery/lib/gallery/drawer.dart

@@ -10,6 +10,8 @@ import 'package:flutter/material.dart';
 
 import 'package:url_launcher/url_launcher.dart';
 
+import 'theme.dart';
+
 class LinkTextSpan extends TextSpan {
 
   // Beware!
@@ -107,7 +109,7 @@ class _GalleryDrawerHeaderState extends State<GalleryDrawerHeader> {
 class GalleryDrawer extends StatelessWidget {
   const GalleryDrawer({
     Key key,
-    this.useLightTheme,
+    this.galleryTheme,
     @required this.onThemeChanged,
     this.timeDilation,
     @required this.onTimeDilationChanged,
@@ -127,8 +129,8 @@ class GalleryDrawer extends StatelessWidget {
        assert(onTimeDilationChanged != null),
        super(key: key);
 
-  final bool useLightTheme;
-  final ValueChanged<bool> onThemeChanged;
+  final GalleryTheme galleryTheme;
+  final ValueChanged<GalleryTheme> onThemeChanged;
 
   final double timeDilation;
   final ValueChanged<double> onTimeDilationChanged;
@@ -158,23 +160,16 @@ class GalleryDrawer extends StatelessWidget {
     final TextStyle aboutTextStyle = themeData.textTheme.body2;
     final TextStyle linkStyle = themeData.textTheme.body2.copyWith(color: themeData.accentColor);
 
-    final Widget lightThemeItem = new RadioListTile<bool>(
-      secondary: const Icon(Icons.brightness_5),
-      title: const Text('Light'),
-      value: true,
-      groupValue: useLightTheme,
-      onChanged: onThemeChanged,
-      selected: useLightTheme,
-    );
-
-    final Widget darkThemeItem = new RadioListTile<bool>(
-      secondary: const Icon(Icons.brightness_7),
-      title: const Text('Dark'),
-      value: false,
-      groupValue: useLightTheme,
-      onChanged: onThemeChanged,
-      selected: !useLightTheme,
-    );
+    final List<Widget> themeItems = kAllGalleryThemes.map<Widget>((GalleryTheme theme) {
+      return new RadioListTile<GalleryTheme>(
+        title: new Text(theme.name),
+        secondary: new Icon(theme.icon),
+        value: theme,
+        groupValue: galleryTheme,
+        onChanged: onThemeChanged,
+        selected: galleryTheme == theme,
+      );
+    }).toList();
 
     final Widget mountainViewItem = new RadioListTile<TargetPlatform>(
       // on iOS, we don't want to show an Android phone icon
@@ -288,18 +283,19 @@ class GalleryDrawer extends StatelessWidget {
     );
 
     final List<Widget> allDrawerItems = <Widget>[
-      new GalleryDrawerHeader(light: useLightTheme),
-      lightThemeItem,
-      darkThemeItem,
+      new GalleryDrawerHeader(
+        light: galleryTheme.theme.brightness == Brightness.light,
+      ),
+    ]
+    ..addAll(themeItems)
+    ..addAll(<Widget>[
       const Divider(),
       mountainViewItem,
       cupertinoItem,
       const Divider(),
-    ];
-
-    allDrawerItems.addAll(textSizeItems);
-
-    allDrawerItems..addAll(<Widget>[
+    ])
+    ..addAll(textSizeItems)
+    ..addAll(<Widget>[
       overrideDirectionItem,
       const Divider(),
       animateSlowlyItem,

examples/flutter_gallery/lib/gallery/home.dart

@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 
 import 'drawer.dart';
 import 'item.dart';
+import 'theme.dart';
 
 const double _kFlexibleSpaceMaxHeight = 256.0;
 const String _kGalleryAssetsPackage = 'flutter_gallery_assets';
@@ -64,7 +65,7 @@ class _AppBarBackground extends StatelessWidget {
 class GalleryHome extends StatefulWidget {
   const GalleryHome({
     Key key,
-    this.useLightTheme,
+    this.galleryTheme,
     @required this.onThemeChanged,
     this.timeDilation,
     @required this.onTimeDilationChanged,
@@ -84,8 +85,8 @@ class GalleryHome extends StatefulWidget {
        assert(onTimeDilationChanged != null),
        super(key: key);
 
-  final bool useLightTheme;
-  final ValueChanged<bool> onThemeChanged;
+  final GalleryTheme galleryTheme;
+  final ValueChanged<GalleryTheme> onThemeChanged;
 
   final double timeDilation;
   final ValueChanged<double> onTimeDilationChanged;
@@ -172,7 +173,7 @@ class GalleryHomeState extends State<GalleryHome> with SingleTickerProviderState
     Widget home = new Scaffold(
       key: _scaffoldKey,
       drawer: new GalleryDrawer(
-        useLightTheme: widget.useLightTheme,
+        galleryTheme: widget.galleryTheme,
         onThemeChanged: widget.onThemeChanged,
         timeDilation: widget.timeDilation,
         onTimeDilationChanged: widget.onTimeDilationChanged,

examples/flutter_gallery/lib/gallery/theme.dart

+// Copyright 2018 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 GalleryTheme {
+  const GalleryTheme({ this.name, this.icon, this.theme });
+  final String name;
+  final IconData icon;
+  final ThemeData theme;
+}
+
+const MaterialColor _kPurpleSwatch = const MaterialColor(
+  500,
+  const <int, Color> {
+    50: const Color(0xFFF2E7FE),
+    100: const Color(0xFFD7B7FD),
+    200: const Color(0xFFBB86FC),
+    300: const Color(0xFF9E55FC),
+    400: const Color(0xFF7F22FD),
+    500: const Color(0xFF6200EE),
+    600: const Color(0xFF4B00D1),
+    700: const Color(0xFF3700B3),
+    800: const Color(0xFF270096),
+    900: const Color(0xFF190078),
+  }
+);
+
+final List<GalleryTheme> kAllGalleryThemes = <GalleryTheme>[
+  new GalleryTheme(
+    name: 'Light',
+    icon: Icons.brightness_5,
+    theme: new ThemeData(
+      brightness: Brightness.light,
+      primarySwatch: Colors.blue,
+    ),
+  ),
+  new GalleryTheme(
+    name: 'Dark',
+    icon: Icons.brightness_7,
+    theme: new ThemeData(
+      brightness: Brightness.dark,
+      primarySwatch: Colors.blue,
+    ),
+  ),
+  new GalleryTheme(
+    name: 'Purple',
+    icon: Icons.brightness_6,
+    theme: new ThemeData(
+      brightness: Brightness.light,
+      primarySwatch: _kPurpleSwatch,
+      buttonColor: _kPurpleSwatch[500],
+      splashColor: Colors.white24,
+      splashFactory: InkRipple.splashFactory,
+      errorColor: const Color(0xFFFF1744),
+      buttonTheme: const ButtonThemeData(
+        textTheme: ButtonTextTheme.primary,
+      ),
+    ),
+  ),
+];