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:

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:

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

Access colors semantically:

• colorScheme.primary / onPrimary - Key actions, FAB
• colorScheme.secondary / onSecondary - Less prominent actions
• colorScheme.tertiary / onTertiary - Contrasting accents
• colorScheme.surface / onSurface - Cards, sheets, dialogs
• colorScheme.error / onError - Error states

Support dark mode with Brightness.dark variant.

Components & Widgets

Prefer Material 3 widgets:

• FilledButton, FilledButton.tonal, OutlinedButton, TextButton
• FloatingActionButton.extended with icon
• NavigationBar (bottom), NavigationRail (side), NavigationDrawer
• Card with elevation and surfaceTintColor
• SearchAnchor for search
• SegmentedButton for toggles
• Slider, Switch, Checkbox with M3 styling

Use Material widget with proper elevation and surfaceTintColor for custom surfaces.

Motion & Animation

Use purposeful, expressive motion:

// Implicit animations
AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeOutCubic,
  // ...
)

// Hero transitions
Hero(
  tag: 'item-$id',
  child: Image.network(url),
)

// Page transitions
MaterialPageRoute(
  builder: (context) => DetailScreen(),
)

Motion principles:

• Informative: Motion shows spatial relationships
• Focused: Draw attention to what matters
• Expressive: Reflect brand personality

Duration guidelines: 150ms (small), 300ms (medium), 500ms (large/complex).

Layout & Spacing

Use Material spacing scale (multiples of 4dp):

const EdgeInsets.all(16) // Standard padding
const EdgeInsets.symmetric(horizontal: 24, vertical: 16)
const SizedBox(height: 8) // Vertical spacing

Responsive layouts:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return WideLayout();
    }
    return NarrowLayout();
  },
)

Use Flex, Wrap, GridView.builder for adaptive grids.

Architecture & State Management

Recommended: Riverpod

// Define providers
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
  void increment() => state++;
}

// Use in widget
class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('$count');
  }
}

Alternative: BLoC (for larger apps)

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<Increment>((event, emit) => emit(state + 1));
  }
}

Project Structure

lib/
├── main.dart
├── app/
│   ├── app.dart              # MaterialApp setup
│   └── router.dart           # Navigation (go_router)
├── features/
│   └── feature_name/
│       ├── presentation/     # Widgets, screens
│       ├── application/      # Business logic, providers/blocs
│       ├── domain/           # Entities, repositories interfaces
│       └── data/             # Repository implementations, DTOs
├── shared/
│   ├── widgets/              # Reusable widgets
│   └── theme/                # ThemeData, ColorScheme
└── core/
    ├── constants/
    └── utils/

Performance Checklist

• Use const constructors everywhere possible
• Implement ListView.builder / GridView.builder for long lists
• Cache network images with cached_network_image
• Avoid rebuilding entire widget trees - use selective Consumer or BlocBuilder
• Profile with Flutter DevTools
• Keep build methods lean - extract widgets
• Use RepaintBoundary for complex animations

Platform-Specific Guidelines

iOS Considerations

• Support safe areas (SafeArea widget)
• Consider CupertinoPageRoute for iOS-style transitions
• Support dynamic type / text scaling
• Handle notch and home indicator

Android Considerations

• Support edge-to-edge display
• Handle back button / predictive back
• Material You dynamic colors when available
• Support foldables with adaptive layouts

Quality Checklist

• App size optimized (tree-shake, deferred loading)
• Startup time < 2 seconds
• Smooth 60fps animations
• Dark mode supported
• Accessibility: semantic labels, sufficient contrast
• Responsive across screen sizes
• Offline capability considered
• Error states handled gracefully

Code Style

// Good: Descriptive, const, proper typing
const EdgeInsets kDefaultPadding = EdgeInsets.all(16);

class ProductCard extends StatelessWidget {
  const ProductCard({
    super.key,
    required this.product,
    this.onTap,
  });

  final Product product;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final colors = theme.colorScheme;

    return Card(
      clipBehavior: Clip.antiAlias,
      child: InkWell(
        onTap: onTap,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Widget content
          ],
        ),
      ),
    );
  }
}

Restricted

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

NEVER generate generic, boilerplate Flutter code. Each implementation should feel crafted for its specific purpose with thoughtful Material Design 3 application and attention to detail.