Flutter Development Guide
A practical guide for building cross-platform applications with Flutter 3 and Dart. Focuses on proven patterns, state management, and performance optimization.
Quick Reference
Widget Patterns
| Purpose |
Component |
| State management (simple) |
StateProvider + ConsumerWidget |
| State management (complex) |
NotifierProvider / Bloc |
| Async data |
FutureProvider / AsyncNotifierProvider |
| Real-time streams |
StreamProvider |
| Navigation |
GoRouter + context.go/push |
| Responsive layout |
LayoutBuilder + breakpoints |
| List display |
ListView.builder |
| Complex scrolling |
CustomScrollView + Slivers |
| Hooks |
HookWidget + useState/useEffect |
| Forms |
Form + TextFormField + validation |
Performance Patterns
| Purpose |
Solution |
| Prevent rebuilds |
const constructors |
| Selective updates |
ref.watch(provider.select(...)) |
| Isolate repaints |
RepaintBoundary |
| Lazy lists |
ListView.builder |
| Heavy computation |
compute() isolate |
| Image caching |
cached_network_image |
Core Principles
Widget Optimization
- Use
const constructors wherever possible
- Extract static widgets to separate const classes
- Use
Key for list items (ValueKey, ObjectKey)
- Prefer
ConsumerWidget over StatefulWidget for state
State Management
- Riverpod for dependency injection and simple state
- Bloc/Cubit for event-driven workflows and complex logic
- Never mutate state directly (create new instances)
- Use
select() to minimize rebuilds
Layout
- 8pt spacing increments (8, 16, 24, 32, 48)
- Responsive breakpoints: mobile (<650), tablet (650-1100), desktop (>1100)
- Support all screen sizes with flexible layouts
- Follow Material 3 / Cupertino design guidelines
Performance
- Profile with DevTools before optimizing
- Target <16ms frame time for 60fps
- Use
RepaintBoundary for complex animations
- Offload heavy work with
compute()
Checklist
Widget Best Practices
State Management
Navigation
Performance
Testing
References
| Topic |
Reference |
| Widget patterns, const optimization, responsive layout |
Widget Patterns |
| Riverpod providers, notifiers, async state |
Riverpod State Management |
| Bloc, Cubit, event-driven state |
Bloc State Management |
| GoRouter setup, routes, deep linking |
GoRouter Navigation |
| Feature-based structure, dependencies |
Project Structure |
| Profiling, const optimization, DevTools |
Performance Optimization |
| Widget tests, integration tests, mocking |
Testing Strategies |
| iOS/Android/Web specific implementations |
Platform Integration |
| Implicit/explicit animations, Hero, transitions |
Animations |
| Dio, interceptors, error handling, caching |
Networking |
| Form validation, FormField, input formatters |
Forms |
| i18n, flutter_localizations, intl |
Localization |
Flutter, Dart, Material Design, and Cupertino are trademarks of Google LLC and Apple Inc. respectively. Riverpod, Bloc, and GoRouter are open-source packages by their respective maintainers.
Source: leecyno1/boutique-openclaw-skills — distributed by TomeVault.
1---2name: leecyno1-boutique-openclaw-skills-flutter-dev3description: Flutter Development Guide4---56# Flutter Development Guide78A practical guide for building cross-platform applications with Flutter 3 and Dart. Focuses on proven patterns, state management, and performance optimization.910## Quick Reference1112### Widget Patterns1314| Purpose | Component |15|---------|-----------|16| State management (simple) | `StateProvider` + `ConsumerWidget` |17| State management (complex) | `NotifierProvider` / `Bloc` |18| Async data | `FutureProvider` / `AsyncNotifierProvider` |19| Real-time streams | `StreamProvider` |20| Navigation | `GoRouter` + `context.go/push` |21| Responsive layout | `LayoutBuilder` + breakpoints |22| List display | `ListView.builder` |23| Complex scrolling | `CustomScrollView` + Slivers |24| Hooks | `HookWidget` + `useState/useEffect` |25| Forms | `Form` + `TextFormField` + validation |2627### Performance Patterns2829| Purpose | Solution |30|---------|----------|31| Prevent rebuilds | `const` constructors |32| Selective updates | `ref.watch(provider.select(...))` |33| Isolate repaints | `RepaintBoundary` |34| Lazy lists | `ListView.builder` |35| Heavy computation | `compute()` isolate |36| Image caching | `cached_network_image` |3738## Core Principles3940### Widget Optimization41- Use `const` constructors wherever possible42- Extract static widgets to separate const classes43- Use `Key` for list items (ValueKey, ObjectKey)44- Prefer `ConsumerWidget` over `StatefulWidget` for state4546### State Management47- Riverpod for dependency injection and simple state48- Bloc/Cubit for event-driven workflows and complex logic49- Never mutate state directly (create new instances)50- Use `select()` to minimize rebuilds5152### Layout53- 8pt spacing increments (8, 16, 24, 32, 48)54- Responsive breakpoints: mobile (<650), tablet (650-1100), desktop (>1100)55- Support all screen sizes with flexible layouts56- Follow Material 3 / Cupertino design guidelines5758### Performance59- Profile with DevTools before optimizing60- Target <16ms frame time for 60fps61- Use `RepaintBoundary` for complex animations62- Offload heavy work with `compute()`6364## Checklist6566### Widget Best Practices67- [ ] `const` constructors on all static widgets68- [ ] Proper `Key` on list items69- [ ] `ConsumerWidget` for state-dependent widgets70- [ ] No widget building inside `build()` method71- [ ] Extract reusable widgets to separate files7273### State Management74- [ ] Immutable state objects75- [ ] `select()` for granular rebuilds76- [ ] Proper provider scoping77- [ ] Dispose controllers and subscriptions78- [ ] Handle loading/error states7980### Navigation81- [ ] GoRouter with typed routes82- [ ] Auth guards via redirect83- [ ] Deep linking support84- [ ] State preservation across routes8586### Performance87- [ ] Profile mode testing (`flutter run --profile`)88- [ ] <16ms frame rendering time89- [ ] No unnecessary rebuilds (DevTools check)90- [ ] Images cached and resized91- [ ] Heavy computation in isolates9293### Testing94- [ ] Widget tests for UI components95- [ ] Unit tests for business logic96- [ ] Integration tests for user flows97- [ ] Bloc tests with `blocTest()`9899## References100101| Topic | Reference |102|-------|-----------|103| Widget patterns, const optimization, responsive layout | [Widget Patterns](references/widget-patterns.md) |104| Riverpod providers, notifiers, async state | [Riverpod State Management](references/riverpod-state.md) |105| Bloc, Cubit, event-driven state | [Bloc State Management](references/bloc-state.md) |106| GoRouter setup, routes, deep linking | [GoRouter Navigation](references/gorouter-navigation.md) |107| Feature-based structure, dependencies | [Project Structure](references/project-structure.md) |108| Profiling, const optimization, DevTools | [Performance Optimization](references/performance.md) |109| Widget tests, integration tests, mocking | [Testing Strategies](references/testing.md) |110| iOS/Android/Web specific implementations | [Platform Integration](references/platform-specific.md) |111| Implicit/explicit animations, Hero, transitions | [Animations](references/animations.md) |112| Dio, interceptors, error handling, caching | [Networking](references/networking.md) |113| Form validation, FormField, input formatters | [Forms](references/forms.md) |114| i18n, flutter_localizations, intl | [Localization](references/localization.md) |115116---117118Flutter, Dart, Material Design, and Cupertino are trademarks of Google LLC and Apple Inc. respectively. Riverpod, Bloc, and GoRouter are open-source packages by their respective maintainers.119120---121> Source: [leecyno1/boutique-openclaw-skills](https://github.com/leecyno1/boutique-openclaw-skills) — distributed by [TomeVault](https://tomevault.io).122<!-- tomevault:4.0:skill_md:2026-05-22 -->
tomevault-io