flutter-mobile-design

This skill guides creation of distinctive, production-grade Flutter mobile applications using Material Design 3. Implement real working Dart/Flutter code with exceptional attention to aesthetic details, performance, and platform conventions.

The user provides mobile app requirements: a widget, screen, feature, or complete application to build. They may include context about the purpose, target platform (iOS/Android), or design references.

## Design Thinking

Before coding, understand the context and commit to a strong design direction:

- **Purpose**: What problem does this app solve? Who uses it?
- **Platform**: iOS, Android, or both? Consider platform-specific conventions.
- **Tone**: Material Design 3 offers flexibility - choose a personality: vibrant & playful, calm & professional, bold & expressive, minimal & clean, warm & organic.
- **Color Scheme**: Use dynamic color (Material You) or create a custom ColorScheme with clear semantic meaning.
- **Differentiation**: What makes this app memorable? What's the signature interaction or visual element?

Then implement working Flutter code that is:
- Production-grade and functional
- Visually polished with Material Design 3
- Performant and responsive
- Accessible and platform-aware

## Flutter & Material Design 3 Guidelines

### Typography

Use Material 3 type scale with `Theme.of(context).textTheme`:

```dart
Text(
  'Headline',
  style: Theme.of(context).textTheme.headlineMedium,
)
```

Type roles: `displayLarge/Medium/Small`, `headlineLarge/Medium/Small`, `titleLarge/Medium/Small`, `bodyLarge/Medium/Small`, `labelLarge/Medium/Small`.

For custom fonts, define in `TextTheme` and apply via `ThemeData`. Prefer Google Fonts that complement Material 3.

### Color System

Use Material 3 ColorScheme with semantic colors:

```dart
ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.deepPurple,
    brightness: Brightness.light,
  ),
  useMaterial3: true,
)
```

Access colors semantically:
- `colorScheme