| name | flutter-design-system |
| description | Enforce Design Language System adherence in Flutter. Use when enforcing design tokens, preventing hardcoded colors/spacing, or implementing a DLS in Flutter. (triggers: **/theme/**, **/*_theme.dart, **/*_colors.dart, **/*_dls/**, **/foundation/**, **/presentation/**, **/ui/**, **/widgets/**, ThemeData, ColorScheme, AppColors, VColors, VSpacing, AppTheme, design token) |
Flutter Design System Enforcement
Priority: P0 (CRITICAL)
Zero tolerance for hardcoded design values.
Phase 0: Context Discovery (MANDATORY)
Before any UI refactoring, you MUST identify the project's Theme Archetype:
- Check
main.dart: Look for MaterialApp theme configuration.
- Determine Pattern:
- Theme-Driven (Adaptive): If you see
VThemeData(...).toThemeData() or extensive ThemeData overrides, you MUST use Theme.of(context).textTheme or theme.textTheme for feature code.
- Token-Driven (Static): Only use static tokens (
VTypography.*) if there is no global theme bridge or if you are defining the theme itself.
Guidelines
- Colors: Use tokens (
VColors.*, AppColors.*), never Color(0xFF...) or Colors.red.
- Spacing: Use tokens (
VSpacing.*), never magic numbers like 16 or 24.
- Typography: Prioritize
theme.textTheme.* for adaptive UI. Use VTypography.* tokens only for theme definitions or non-contextual logic. Never use inline TextStyle.
- Borders: Use tokens (
VBorders.*), never raw BorderRadius.
- Components: Use DLS widgets (
VButton) over raw Material widgets (ElevatedButton) if available.
Detailed Examples
Anti-Patterns
- No Hex Colors:
Color(0xFF...) is strictly forbidden.
- No Color Enums:
Colors.blue is forbidden in UI code.
- No Magic Spacing:
SizedBox(height: 10) is forbidden.
- No Inline Styles:
TextStyle(fontSize: 14) is forbidden.
- No Raw Widgets: Don't use
ElevatedButton when VButton exists.
Related Topics
mobile-ux-core | flutter/widgets | idiomatic-flutter
