diff --git a/examples/flutter_gallery/lib/gallery/app.dart b/examples/flutter_gallery/lib/gallery/app.dart index c34c54dd80..db3a9d6b70 100644 --- a/examples/flutter_gallery/lib/gallery/app.dart +++ b/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 { - bool _useLightTheme = true; + GalleryTheme _galleryTheme = kAllGalleryThemes[0]; bool _showPerformanceOverlay = false; bool _checkerboardRasterCacheImages = false; bool _checkerboardOffscreenLayers = false; @@ -87,10 +78,10 @@ class GalleryAppState extends State { @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 { onTextScaleFactorChanged: (double value) { setState(() { _textScaleFactor = value; - }); + }); }, overrideDirection: _overrideDirection, onOverrideDirectionChanged: (TextDirection value) { @@ -169,7 +160,7 @@ class GalleryAppState extends State { 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, diff --git a/examples/flutter_gallery/lib/gallery/drawer.dart b/examples/flutter_gallery/lib/gallery/drawer.dart index fabe75acf9..6c0b0be96f 100644 --- a/examples/flutter_gallery/lib/gallery/drawer.dart +++ b/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 { 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 onThemeChanged; + final GalleryTheme galleryTheme; + final ValueChanged onThemeChanged; final double timeDilation; final ValueChanged 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( - secondary: const Icon(Icons.brightness_5), - title: const Text('Light'), - value: true, - groupValue: useLightTheme, - onChanged: onThemeChanged, - selected: useLightTheme, - ); - - final Widget darkThemeItem = new RadioListTile( - secondary: const Icon(Icons.brightness_7), - title: const Text('Dark'), - value: false, - groupValue: useLightTheme, - onChanged: onThemeChanged, - selected: !useLightTheme, - ); + final List themeItems = kAllGalleryThemes.map((GalleryTheme theme) { + return new RadioListTile( + 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( // on iOS, we don't want to show an Android phone icon @@ -288,18 +283,19 @@ class GalleryDrawer extends StatelessWidget { ); final List allDrawerItems = [ - new GalleryDrawerHeader(light: useLightTheme), - lightThemeItem, - darkThemeItem, + new GalleryDrawerHeader( + light: galleryTheme.theme.brightness == Brightness.light, + ), + ] + ..addAll(themeItems) + ..addAll([ const Divider(), mountainViewItem, cupertinoItem, const Divider(), - ]; - - allDrawerItems.addAll(textSizeItems); - - allDrawerItems..addAll([ + ]) + ..addAll(textSizeItems) + ..addAll([ overrideDirectionItem, const Divider(), animateSlowlyItem, diff --git a/examples/flutter_gallery/lib/gallery/home.dart b/examples/flutter_gallery/lib/gallery/home.dart index cfc8372018..8d4fd9667d 100644 --- a/examples/flutter_gallery/lib/gallery/home.dart +++ b/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 onThemeChanged; + final GalleryTheme galleryTheme; + final ValueChanged onThemeChanged; final double timeDilation; final ValueChanged onTimeDilationChanged; @@ -172,7 +173,7 @@ class GalleryHomeState extends State 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, diff --git a/examples/flutter_gallery/lib/gallery/theme.dart b/examples/flutter_gallery/lib/gallery/theme.dart new file mode 100644 index 0000000000..04bc7d2364 --- /dev/null +++ b/examples/flutter_gallery/lib/gallery/theme.dart @@ -0,0 +1,62 @@ +// 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 { + 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 kAllGalleryThemes = [ + 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, + ), + ), + ), +];