forked from mirrors/material_3_expressive
Refactor theme implementation to use ColorScheme.fromSeed for light and dark themes; update README with usage examples and add widgetbook build configuration.
This commit is contained in:
parent
f8b33f7e0d
commit
2f84b1559f
6 changed files with 139 additions and 15 deletions
|
|
@ -31,20 +31,14 @@ class _GalleryAppState extends State<GalleryApp> {
|
|||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final baseLight = ThemeData(
|
||||
useMaterial3: true,
|
||||
colorSchemeSeed: Colors.purple,
|
||||
brightness: Brightness.light,
|
||||
);
|
||||
final baseDark = ThemeData(
|
||||
useMaterial3: true,
|
||||
colorSchemeSeed: Colors.purple,
|
||||
brightness: Brightness.dark,
|
||||
);
|
||||
final light = ColorScheme.fromSeed(
|
||||
seedColor: Colors.purple, brightness: Brightness.light);
|
||||
final dark = ColorScheme.fromSeed(
|
||||
seedColor: Colors.purple, brightness: Brightness.dark);
|
||||
return MaterialApp(
|
||||
title: 'M3E Gallery',
|
||||
theme: withM3ETheme(baseLight),
|
||||
darkTheme: withM3ETheme(baseDark),
|
||||
theme: light.toM3EThemeData(),
|
||||
darkTheme: dark.toM3EThemeData(),
|
||||
themeMode: _mode,
|
||||
home: GalleryHome(
|
||||
isDark: _mode == ThemeMode.dark,
|
||||
|
|
@ -56,7 +50,8 @@ class _GalleryAppState extends State<GalleryApp> {
|
|||
}
|
||||
|
||||
class GalleryHome extends StatefulWidget {
|
||||
const GalleryHome({super.key, required this.isDark, required this.onToggleBrightness});
|
||||
const GalleryHome(
|
||||
{super.key, required this.isDark, required this.onToggleBrightness});
|
||||
|
||||
final bool isDark;
|
||||
final VoidCallback onToggleBrightness;
|
||||
|
|
@ -77,7 +72,8 @@ class _GalleryHomeState extends State<GalleryHome> {
|
|||
titleText: 'M3E Gallery',
|
||||
actions: [
|
||||
IconButton(
|
||||
tooltip: widget.isDark ? 'Switch to light mode' : 'Switch to dark mode',
|
||||
tooltip:
|
||||
widget.isDark ? 'Switch to light mode' : 'Switch to dark mode',
|
||||
onPressed: widget.onToggleBrightness,
|
||||
icon: Icon(widget.isDark ? Icons.dark_mode : Icons.light_mode),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ dependencies:
|
|||
m3e_collection:
|
||||
path: ../../packages/m3e_collection
|
||||
material_color_utilities: ^0.11.0
|
||||
widgetbook: ^3.18.0
|
||||
|
||||
flutter:
|
||||
uses-material-design: true
|
||||
|
|
|
|||
30
apps/gallery/pubspec_overrides.yaml
Normal file
30
apps/gallery/pubspec_overrides.yaml
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
# melos_managed_dependency_overrides: app_bar_m3e,button_group_m3e,button_m3e,fab_m3e,icon_button_m3e,loading_indicator_m3e,m3e_collection,m3e_design,navigation_bar_m3e,navigation_rail_m3e,progress_indicator_m3e,slider_m3e,split_button_m3e,toolbar_m3e
|
||||
dependency_overrides:
|
||||
app_bar_m3e:
|
||||
path: ..\\..\\packages\\app_bar_m3e
|
||||
button_group_m3e:
|
||||
path: ..\\..\\packages\\button_group_m3e
|
||||
button_m3e:
|
||||
path: ..\\..\\packages\\button_m3e
|
||||
fab_m3e:
|
||||
path: ..\\..\\packages\\fab_m3e
|
||||
icon_button_m3e:
|
||||
path: ..\\..\\packages\\icon_button_m3e
|
||||
loading_indicator_m3e:
|
||||
path: ..\\..\\packages\\loading_indicator_m3e
|
||||
m3e_collection:
|
||||
path: ..\\..\\packages\\m3e_collection
|
||||
m3e_design:
|
||||
path: ..\\..\\packages\\m3e_design
|
||||
navigation_bar_m3e:
|
||||
path: ..\\..\\packages\\navigation_bar_m3e
|
||||
navigation_rail_m3e:
|
||||
path: ..\\..\\packages\\navigation_rail_m3e
|
||||
progress_indicator_m3e:
|
||||
path: ..\\..\\packages\\progress_indicator_m3e
|
||||
slider_m3e:
|
||||
path: ..\\..\\packages\\slider_m3e
|
||||
split_button_m3e:
|
||||
path: ..\\..\\packages\\split_button_m3e
|
||||
toolbar_m3e:
|
||||
path: ..\\..\\packages\\toolbar_m3e
|
||||
Loading…
Add table
Add a link
Reference in a new issue