flutter-expert
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.
By jeffallan · 13,457 installs
npx skills add jeffallan/claude-skills --skill flutter-expert
Source repository · Upstream listing
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)
Before / After — State Management
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:
1. Widget code with proper const usage
2. Provider/Bloc definitions
3. Route configuration if needed
4. Test file structure
[Documentation](https://jeffallan.github.io/claude skills/skills/frontend/flutter expert/)