material-theming

Featured

Best practices for Flutter theming with Material 3, treating ThemeData as the single source of truth for colors, typography, component styles, and spacing. Use when creating, modifying, or reviewing ThemeData, ColorScheme, TextTheme, component themes, spacing systems, or light/dark mode support, and whenever widget code carries its own styling: a hardcoded Color, an inline TextStyle, raw padding or gap numbers, the same decoration repeated across widget instances, or a brightness/dark-mode conditional inside build, even when the request only says "review this widget", "cut the duplication", "stop repeating this", or "tidy this up".

Code & Development 161 stars 22 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
74
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Theming Material 3 theming best practices for Flutter applications using `ThemeData` as the single source of truth for colors, typography, component styles, and spacing. ## Core Standards Apply these standards to ALL theming work: - **Use `ThemeData` as the single source of truth** — never inline colors or text styles in widgets - **Reference colors via `Theme.of(context).colorScheme`** — never `Colors.blue`, `Colors.red`, or any hardcoded `Color` values - **Reference text styles via `Theme.of(context).textTheme`** — never inline `TextStyle(...)` in widget code. `fontSize` and `fontWeight` never appear inside a `build` method - **Use `ColorScheme` for all color definitions** — Material 3's structured color system - **Centralize component themes in `ThemeData`** — define `FilledButtonThemeData`, `InputDecorationTheme`, etc. in the theme, not per-widget. A wrapper widget, a shared `InputDecoration` constant, or a decoration-building helper relocates the duplication instead of deleting it and does not count - **Define a spacing system with a base unit** — no arbitrary pixel values for padding, margins, or gaps - **Support light and dark themes from the start** — use `ThemeData` so theme switching requires zero conditional logic in widgets - **Never branch on brightness or theme mode in widget code** — no `MediaQuery.platformBrightnessOf`, no ternary on `Theme.of(context).brightness`, no `context.isDarkMode` extension. Two `ColorScheme` instances make the branch unnecessary...

Details

Author
VeryGoodOpenSource
Repository
VeryGoodOpenSource/vgv-ai-flutter-plugin
Created
6 months ago
Last Updated
yesterday
Language
Shell
License
MIT

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Code & Development Listed

flutter

Universal Flutter coding standards. Use when writing or reviewing any Flutter/Dart UI code — widgets, state management, navigation, architecture, performance, or testing.

2 Updated 1 months ago
ndisisnd
Web & Frontend Listed

design-system-structure

Structures a Flutter design system as tokens→theme→modifiers→shapes with two-tier tokens (primitives named by measured value, semantic slots named by role) exposed through a ThemeExtension read via an asserting of(context); hand-authors both light and dark ColorScheme instead of ColorScheme.fromSeed, keeps every raw color/hex/Colors./Curves./Duration/BorderRadius/fontSize inside lib/theme/ behind a no-raw-values gate, collapses animation to zero under reduced motion, restores the persisted theme before first paint, bundles fonts (never google_fonts/dynamic_color), and derives each stateful meaning's supporting color last so color is never its sole signal. Use when creating or editing ThemeData/ThemeExtension/ColorScheme, adding or renaming a design token, wiring theme injection or theme-mode persistence, reaching for fromSeed/dynamic_color/google_fonts/FontVariation, structuring a theme/ or DesignSystem/ folder, or reviewing any widget that renders a color, radius, duration, or font.

0 Updated 1 months ago
zakariaf
Web & Frontend Listed

flutter-design-system

Create, extend, or repair semantic Flutter design systems covering tokens, themes, typography, color, spacing, geometry, motion, and component contracts. Use for ThemeData work, design-token extraction, dark mode, component standardization, UI consistency, or migration away from scattered visual constants.

4 Updated 1 months ago
musabekisakov-imj