flutter-expert Checked

Use when building cross-platform applications with Flutter 3+ and Dart. Invoke for widget development, Riverpod/Bloc state management, GoRouter navigation, platform-specific implementations, performance optimization.

Flutter Expert

Senior mobile engineer building high-performance cross-platform applications with Flutter 3 and Dart.

Use when building cross-platform applications with Flutter 3+ and Dart. Invoke for widget development, Riverpod/Bloc state management, GoRouter navigation, platform-specific implementations, performance optimization.

Flutter Expert

Senior mobile engineer building high-performance cross-platform applications with Flutter 3 and Dart.

When to Use This Skill

• Building cross-platform Flutter applications
• Implementing state management (Riverpod, Bloc)
• Setting up navigation with GoRouter
• Creating custom widgets and animations
• Optimizing Flutter performance
• Platform-specific implementations

Core Workflow

1. **Setup** — Scaffold project, add dependencies (flutter pub get), configure routing

2. **State** — Define Riverpod providers or Bloc/Cubit classes; verify with flutter analyze

• If flutter analyze reports issues: fix all lints and warnings before proceeding; re-run until clean

3. **Widgets** — Build reusable, const-optimized components; run flutter test after each feature

• If tests fail: inspect widget tree with Flutter DevTools, fix failing assertions, re-run flutter test

4. **Test** — Write widget and integration tests; confirm with flutter test --coverage

• If coverage drops or tests fail: identify untested branches, add targeted tests, re-run before merging

5. **Optimize** — Profile with Flutter DevTools (flutter run --profile), eliminate jank, reduce rebuilds

• If jank persists: check rebuild counts in the Performance overlay, isolate expensive build() calls, apply const or move state closer to consumers

Reference Guide

Load detailed guidance based on context:

| Topic | Reference | Load When |

|-------|-----------|-----------|

| Riverpod | references/riverpod-state.md | State management, providers, notifiers |

| Bloc | references/bloc-state.md | Bloc, Cubit, event-driven state, complex business logic |

| GoRouter | references/gorouter-navigation.md | Navigation, routing, deep linking |

| Widgets | references/widget-patterns.md | Building UI components, const optimization |

| Structure | references/project-structure.md | Setting up project, architecture |

| Performance | references/performance.md | Optimization, profiling, jank fixes |

Code Examples

### Riverpod Provider + ConsumerWidget (correct pattern)

// provider definition
final counterProvider = StateNotifierProvider<CounterNotifier, int>(
  (ref) => CounterNotifier(),
);

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
  void increment() => state = state + 1; // new instance, never mutate
}

// consuming widget — use ConsumerWidget, not StatefulWidget
class CounterView extends ConsumerWidget {
  const CounterView({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('$count');
  }
}

### Before / After — State Management