firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hans Muller 2018-03-14 10:52:06 -07:00 committed by GitHub
parent 231170a7c5
commit 4c7cc73637
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 98 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
examples/flutter_gallery/lib/gallery/app.dart
View File

@ -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,

52
examples/flutter_gallery/lib/gallery/drawer.dart
View File

@ -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,

9
examples/flutter_gallery/lib/gallery/home.dart
View File

@ -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,

62
examples/flutter_gallery/lib/gallery/theme.dart Normal file
View File

@ -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 <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,
),
),
),
];