Flutter开发
Flutter跨平台开发指南，涵盖widget模式、Riverpod/Bloc状态管理、GoRouter导航、性能优化和平台特定实现。
name: flutter-dev
description: |
Flutter cross-platform development guide covering widget patterns, Riverpod/Bloc state management, GoRouter navigation, performance optimization, and platform-specific implementations. Includes const optimization, responsive layouts, testing strategies, and DevTools profiling.
Use when: building Flutter apps, implementing state management (Riverpod/Bloc), setting up GoRouter navigation, creating custom widgets, optimizing performance, writing widget tests, cross-platform development.
description_zh: "Flutter 跨平台开发指南"
description_en: "Flutter cross-platform dev guide (Riverpod, GoRouter)"
license: MIT
metadata:
version: "1.0.0"
category: mobile
sources:
- Flutter Documentation
- Riverpod Documentation
- Bloc Library Documentation
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.
1---2name: flutter3description: Flutter开发4---5# Flutter开发67Flutter跨平台开发指南，涵盖widget模式、Riverpod/Bloc状态管理、GoRouter导航、性能优化和平台特定实现。89---10name: flutter-dev11description: |12 Flutter cross-platform development guide covering widget patterns, Riverpod/Bloc state management, GoRouter navigation, performance optimization, and platform-specific implementations. Includes const optimization, responsive layouts, testing strategies, and DevTools profiling.13 Use when: building Flutter apps, implementing state management (Riverpod/Bloc), setting up GoRouter navigation, creating custom widgets, optimizing performance, writing widget tests, cross-platform development.14description_zh: "Flutter 跨平台开发指南"15description_en: "Flutter cross-platform dev guide (Riverpod, GoRouter)"16license: MIT17metadata:18 version: "1.0.0"19 category: mobile20 sources:21 - Flutter Documentation22 - Riverpod Documentation23 - Bloc Library Documentation24---2526# Flutter Development Guide2728A practical guide for building cross-platform applications with Flutter 3 and Dart. Focuses on proven patterns, state management, and performance optimization.2930## Quick Reference3132### Widget Patterns3334| Purpose | Component |35|---------|-----------|36| State management (simple) | `StateProvider` + `ConsumerWidget` |37| State management (complex) | `NotifierProvider` / `Bloc` |38| Async data | `FutureProvider` / `AsyncNotifierProvider` |39| Real-time streams | `StreamProvider` |40| Navigation | `GoRouter` + `context.go/push` |41| Responsive layout | `LayoutBuilder` + breakpoints |42| List display | `ListView.builder` |43| Complex scrolling | `CustomScrollView` + Slivers |44| Hooks | `HookWidget` + `useState/useEffect` |45| Forms | `Form` + `TextFormField` + validation |4647### Performance Patterns4849| Purpose | Solution |50|---------|----------|51| Prevent rebuilds | `const` constructors |52| Selective updates | `ref.watch(provider.select(...))` |53| Isolate repaints | `RepaintBoundary` |54| Lazy lists | `ListView.builder` |55| Heavy computation | `compute()` isolate |56| Image caching | `cached_network_image` |5758## Core Principles5960### Widget Optimization61- Use `const` constructors wherever possible62- Extract static widgets to separate const classes63- Use `Key` for list items (ValueKey, ObjectKey)64- Prefer `ConsumerWidget` over `StatefulWidget` for state6566### State Management67- Riverpod for dependency injection and simple state68- Bloc/Cubit for event-driven workflows and complex logic69- Never mutate state directly (create new instances)70- Use `select()` to minimize rebuilds7172### Layout73- 8pt spacing increments (8, 16, 24, 32, 48)74- Responsive breakpoints: mobile (<650), tablet (650-1100), desktop (>1100)75- Support all screen sizes with flexible layouts76- Follow Material 3 / Cupertino design guidelines7778### Performance79- Profile with DevTools before optimizing80- Target <16ms frame time for 60fps81- Use `RepaintBoundary` for complex animations82- Offload heavy work with `compute()`8384## Checklist8586### Widget Best Practices87- [ ] `const` constructors on all static widgets88- [ ] Proper `Key` on list items89- [ ] `ConsumerWidget` for state-dependent widgets90- [ ] No widget building inside `build()` method91- [ ] Extract reusable widgets to separate files9293### State Management94- [ ] Immutable state objects95- [ ] `select()` for granular rebuilds96- [ ] Proper provider scoping97- [ ] Dispose controllers and subscriptions98- [ ] Handle loading/error states99100### Navigation101- [ ] GoRouter with typed routes102- [ ] Auth guards via redirect103- [ ] Deep linking support104- [ ] State preservation across routes105106### Performance107- [ ] Profile mode testing (`flutter run --profile`)108- [ ] <16ms frame rendering time109- [ ] No unnecessary rebuilds (DevTools check)110- [ ] Images cached and resized111- [ ] Heavy computation in isolates112113### Testing114- [ ] Widget tests for UI components115- [ ] Unit tests for business logic116- [ ] Integration tests for user flows117- [ ] Bloc tests with `blocTest()`118119## References120121| Topic | Reference |122|-------|-----------|123| Widget patterns, const optimization, responsive layout | [Widget Patterns](references/widget-patterns.md) |124| Riverpod providers, notifiers, async state | [Riverpod State Management](references/riverpod-state.md) |125| Bloc, Cubit, event-driven state | [Bloc State Management](references/bloc-state.md) |126| GoRouter setup, routes, deep linking | [GoRouter Navigation](references/gorouter-navigation.md) |127| Feature-based structure, dependencies | [Project Structure](references/project-structure.md) |128| Profiling, const optimization, DevTools | [Performance Optimization](references/performance.md) |129| Widget tests, integration tests, mocking | [Testing Strategies](references/testing.md) |130| iOS/Android/Web specific implementations | [Platform Integration](references/platform-specific.md) |131| Implicit/explicit animations, Hero, transitions | [Animations](references/animations.md) |132| Dio, interceptors, error handling, caching | [Networking](references/networking.md) |133| Form validation, FormField, input formatters | [Forms](references/forms.md) |134| i18n, flutter_localizations, intl | [Localization](references/localization.md) |135136---137138Flutter, 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.
tugoukezhang