Created
January 23, 2026 15:26
-
-
Save fredgrott/a34303806f7c10b0ca0c3119c40f40ad to your computer and use it in GitHub Desktop.
models as design tokens in a theme extension
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Copyright 2026 Fredrick Allan Grott. All rights reserved. | |
| // Use of this source code is governed by a BSD-style | |
| // license that can be found in the LICENSE file. | |
| // | |
| // Modified from m3e_design package | |
| // Copyright (c) 2025 Emily Moonstone | |
| // MIT Licnese | |
| // ignore_for_file: prefer_constructors_over_static_methods | |
| import 'package:flutter/material.dart'; | |
| import 'package:material_expressive_collection/src/tokens/m_3_e_custom__shapes.dart'; | |
| import 'package:material_expressive_collection/src/tokens/m_3_e_custom_color_tokens.dart'; | |
| import 'package:material_expressive_collection/src/tokens/m_3_e_custom_motion.dart'; | |
| import 'package:material_expressive_collection/src/tokens/m_3_e_custom_spacing.dart'; | |
| import 'package:material_expressive_collection/src/tokens/m_3_e_custom_typography_tokens.dart'; | |
| /// Typically it is used in this manner: | |
| /// | |
| /// ```dart | |
| /// @override | |
| /// Widget build(BuildContext context) { | |
| /// 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: light.toM3EThemeData(override: m3eOverride, base: themeDataWithCustomComponentThemes ), | |
| /// darkTheme: dark.toM3EThemeData(), | |
| /// themeMode: _mode, | |
| /// home: GalleryHome( | |
| /// isDark: _mode == ThemeMode.dark, | |
| /// onToggleBrightness: _toggleMode, | |
| /// ), | |
| /// debugShowCheckedModeBanner: false, | |
| /// ); | |
| /// } | |
| /// ``` | |
| /// | |
| /// Typically an m3eOverride is used so as to provide the custom GoogleFont stuff via the | |
| /// text theme and the expressive text themes and ThemeData base to supply the custom | |
| /// component themes especially if you use FlexColorScheme package to generate | |
| /// component themes. | |
| @immutable | |
| class M3ETheme extends ThemeExtension<M3ETheme> { | |
| final M3ECustomColors colors; | |
| final M3ECustomTypography typography; | |
| final M3ECustomShapes shapes; | |
| final M3ECustomSpacing spacing; | |
| final M3EMotion motion; | |
| const M3ETheme({ | |
| required this.colors, | |
| required this.typography, | |
| required this.shapes, | |
| required this.spacing, | |
| required this.motion, | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment