Flutter Expert

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:

Code Examples

Riverpod Provider + ConsumerWidget (correct pattern)

// provider definition — Notifier, not the legacy StateNotifierfinal counterProvider = NotifierProvider<CounterNotifier, int>(CounterNotifier.new);
class CounterNotifier extends Notifier<int> {  @override  int build() => 0;  void increment() => state = state + 1; // new instance, never mutate}
// consuming widget — use ConsumerWidget, not StatefulWidgetclass 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

// ❌ WRONG: app-wide state in setStateclass _BadCounterState extends State<BadCounter> {  int _count = 0;  void _inc() => setState(() => _count++); // causes full subtree rebuild}
// ✅ CORRECT: scoped Riverpod consumerclass GoodCounter extends ConsumerWidget {  const GoodCounter({super.key});  @override  Widget build(BuildContext context, WidgetRef ref) {    final count = ref.watch(counterProvider);    return IconButton(      onPressed: () => ref.read(counterProvider.notifier).increment(),      icon: const Icon(Icons.add), // const on static widgets    );  }}

Constraints

MUST DO

• Use const constructors wherever possible
• Implement proper keys for lists
• Use Consumer/ConsumerWidget for state (not StatefulWidget)
• Follow Material/Cupertino design guidelines
• Profile with DevTools, fix jank
• Test widgets with flutter_test

MUST NOT DO

• Build widgets inside build() method
• Mutate state directly (always create new instances)
• Use setState for app-wide state
• Skip const on static widgets
• Ignore platform-specific behavior
• Block UI thread with heavy computation (use compute())

Troubleshooting Common Failures

Output Templates

When implementing Flutter features, provide:

1. Widget code with proper const usage
2. Provider/Bloc definitions
3. Route configuration if needed
4. Test file structure

Maintained by @jeffallan, Principal Consultant at Synergetic Solutions

Documentation