material_expressive 0.1.0

A complete expressive design system for Flutter — tokens, motion, shapes, theme generation, adaptive layouts, loading indicators, animated icons, and screen templates.

Material Expressive

A complete expressive design system for Flutter — not a widget library.

This is a tokens-first, motion-first system that makes Flutter apps feel expressive by enhancing existing Material widgets through themes, extensions, and composition.

Packages

Package	Description
expressive_tokens	Design tokens: colors, typography, spacing, radius, elevation, motion, shapes
expressive_core	Context extensions, adaptive utilities, layout helpers
expressive_motion	Motion specs, page transitions, container transform
expressive_theme	Theme generation from seed color
expressive_components	Surfaces, state layers, loading indicators, animated icons
expressive_templates	Ready-made screen templates
expressive_devtools	Spacing overlay, token inspector

Quick Start

import 'package:expressive_theme/expressive_theme.dart';

final theme = ExpressiveTheme.fromSeed(
  seedColor: Colors.deepOrange,
);

MaterialApp(
  theme: theme.materialTheme,
  darkTheme: theme.materialDarkTheme,
  builder: (context, child) => ExpressiveThemeProvider(
    themeData: theme,
    child: child!,
  ),
);

Then anywhere in your app:

// Access tokens
context.tokens.spacing.lg
context.tokens.colors.primary
context.tokens.radius.md

// Adaptive spacing (auto phone/tablet/desktop)
context.adaptiveSpacing.lg

Principles

1. No widget wrappers — Enhance existing Material widgets through themes
2. Tokens first — No hardcoded values anywhere
3. Motion first — Every transition uses predefined specs
4. Adaptive — Spacing, layout, and density adapt to device

Running the Example

cd example
flutter run

License

MIT