m3e_design

Design language core for Material 3 Expressive (Flutter). Provides ThemeExtension and token accessors for color, typography, shapes, spacing, motion.

Live demo (Gallery)

Explore the components using this design system in the M3E Gallery (GitHub Pages):

https://

To run the Gallery locally:

cd apps/gallery
flutter run -d chrome

Last updated: 2025-10-23

Detailed Guide

What this package provides

The design language core for Material 3 Expressive:

M3ETheme ThemeExtension providing tokens for color, typography, shapes, spacing, elevation, and motion.
Utilities to derive expressive surfaces (e.g., surfaceContainer levels) and harmonize with dynamic colors.

Installation

dependencies:
  m3e_design: ^0.1.0
  dynamic_color: ^1.8.1

Minimum SDK: Dart >=3.5.0.

Quick start: add M3ETheme to ThemeData

final base = ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal));
final m3e = M3ETheme.defaults(base.colorScheme);

return MaterialApp(
  theme: base.copyWith(extensions: [m3e]),
  home: const MyHomePage(),
);

With dynamic color (Android 12+):

DynamicColorBuilder(
  builder: (lightDynamic, darkDynamic) {
    final scheme = lightDynamic ?? ColorScheme.fromSeed(seedColor: Colors.teal);
    final base = ThemeData(colorScheme: scheme);
    final m3e = M3ETheme.defaults(base.colorScheme);
    return MaterialApp(theme: base.copyWith(extensions: [m3e]), home: const MyHomePage());
  },
)

Token overview

Colors: surface, onSurface, container tiers, primary/secondary/tertiary, outline, inverse, etc.
Typography: headline/title/label/body scales incl. emphasized variants.
Shapes: round/square families, radii by size category.
Spacing: xs→xl ramps for consistent paddings.
Motion: durations/easings for expressive transitions.

Used by

All sibling packages in this monorepo use M3E tokens for consistent UI.