Skip to content

Instantly share code, notes, and snippets.

@fredgrott
Created January 23, 2026 15:26
Show Gist options
  • Select an option

  • Save fredgrott/a34303806f7c10b0ca0c3119c40f40ad to your computer and use it in GitHub Desktop.

Select an option

Save fredgrott/a34303806f7c10b0ca0c3119c40f40ad to your computer and use it in GitHub Desktop.
models as design tokens in a theme extension
// 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