flutter-expert

name flutter-expert description 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. license MIT metadata {"author":"https://github.com/Jeffallan","version":"1.1.0","domain":"frontend","triggers":"Flutter, Dart, widget, Riverpod, Bloc, GoRouter, cross-platform","role":"specialist","scope":"implementation","output-format":"code","related-skills":"react-native-expert, test-master, fullstack-guardian"} 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 Setup — Scaffold project, add dependencies ( flutter pub get ), configure routing 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 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 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 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 // ❌ WRONG: app-wide state in setState class _BadCounterState extends State<BadCounter> { int _count = 0; void _inc() => setState(() => _count++); // causes full subtree rebuild } // ✅ CORRECT: scoped Riverpod consumer class 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 Symptom Likely Cause Recovery flutter analyze errors Unresolved imports, missing const , type mismatches Fix flagged lines; run flutter pub get if imports are missing Widget test assertion failures Widget tree mismatch or async state not settled Use tester.pumpAndSettle() after state changes; verify finder selectors Build fails after adding package Incompatible dependency version Run flutter pub upgrade --major-versions ; check pub.dev compatibility Jank / dropped frames Expensive build() calls, uncached widgets, heavy main-thread work Use RepaintBoundary , move heavy work to compute() , add const Hot reload not reflecting changes State held in StateNotifier not reset Use hot restart ( R in terminal) to reset full app state Output Templates When implementing Flutter features, provide: Widget code with proper const usage Provider/Bloc definitions Route configuration if needed Test file structure Documentation