flutter-design

Flutter Design Patterns

Flutter/Dart implementation companion for mobile-app-design-mastery skill. Translates Refactoring UI principles into Flutter code.

Prerequisite: This skill provides Flutter-specific syntax. For mobile design theory and decision-making, reference mobile-app-design-mastery skill.

---

⚠️ CRITICAL: Project Theme First

ALWAYS check existing theme configuration before creating new styles.

If the project has ThemeData, AppColors, AppTextStyles, or similar—USE THEM:

// Check lib/core/theme/ or lib/config/
// Common patterns:
AppColors.primary
AppTextStyles.headline
AppSpacing.md
context.theme.colorScheme.primary

Priority order:

1. Project-defined theme (AppColors, AppTextStyles, custom ThemeExtension)
2. Theme.of(context) access
3. Hardcoded values as last resort only

---

ThemeData Setup (Material 3)

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue, // Brand color
      brightness: Brightness.light,
    ),
    textTheme: _textTheme,
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.dark,
    ),
    textTheme: _textTheme,
  ),
);

---

Color Access Patterns

// ✅ CORRECT: Use ColorScheme
final colors = Theme.of(context).colorScheme;
Container(color: colors.primary)
Text('Hello', style: TextStyle(color: colors.onSurface))

// ✅ With extension
extension BuildContextX on BuildContext {
  ColorScheme get colors => Theme.of(this).colorScheme;
}
// Usage: context.colors.primary

// ❌ AVOID: Hardcoded colors
Container(color: Colors.blue) // Ignores theme

ColorScheme roles:

Role	Light Mode	Dark Mode	Use Case
primary	Brand color	Lighter brand	CTAs, active states
onPrimary	White	Dark	Text on primary
surface	White	Gray-900	Cards, sheets
onSurface	Gray-900	White	Body text
surfaceContainerHighest	Gray-100	Gray-800	Elevated surfaces
outline	Gray-400	Gray-600	Borders
error	Red	Light red	Error states