Back to Details

flutter-dev

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Flutter Development Guide

Flutter开发指南

A practical guide for building cross-platform applications with Flutter 3 and Dart. Focuses on proven patterns, state management, and performance optimization.
这是一份使用Flutter 3和Dart构建跨平台应用的实用指南，重点介绍经过验证的模式、状态管理和性能优化方法。

Quick Reference

快速参考

Widget Patterns

Widget模式

PurposeComponent
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
用途组件
简单状态管理
StateProvider
+ 
ConsumerWidget
复杂状态管理
NotifierProvider
/ 
Bloc
异步数据处理
FutureProvider
/ 
AsyncNotifierProvider
实时流处理
StreamProvider
导航
GoRouter
+ 
context.go/push
响应式布局
LayoutBuilder
+ 断点
列表展示
ListView.builder
复杂滚动
CustomScrollView
+ Slivers
Hooks
HookWidget
+ 
useState/useEffect
表单
Form
+ 
TextFormField
+ 验证

Performance Patterns

性能模式

PurposeSolution
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
用途解决方案
避免重构建
const
构造函数
选择性更新
ref.watch(provider.select(...))
隔离重绘
RepaintBoundary
懒加载列表
ListView.builder
繁重计算
compute()
隔离
图片缓存
cached_network_image

Core Principles

核心原则

Widget Optimization

Widget优化

  • 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
  • 尽可能使用
    const
    构造函数
  • 将静态Widget提取到独立的const类中
  • 为列表项使用
    Key
    （ValueKey、ObjectKey）
  • 对于状态依赖的Widget，优先使用
    ConsumerWidget
    而非
    StatefulWidget

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
  • 使用Riverpod进行依赖注入和简单状态管理
  • 使用Bloc/Cubit处理事件驱动的工作流和复杂逻辑
  • 切勿直接修改状态（创建新实例）
  • 使用
    select()
    最小化重构建

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
  • 采用8pt增量间距（8、16、24、32、48）
  • 响应式断点：移动端(<650)、平板端(650-1100)、桌面端(>1100)
  • 使用灵活布局适配所有屏幕尺寸
  • 遵循Material 3 / Cupertino设计规范

Performance

性能

  • Profile with DevTools before optimizing
  • Target <16ms frame time for 60fps
  • Use 
    RepaintBoundary
    for complex animations
  • Offload heavy work with 
    compute()
  • 优化前先用DevTools进行性能分析
  • 目标是60fps，帧渲染时间<16ms
  • 为复杂动画使用
    RepaintBoundary
  • 使用
    compute()
    卸载繁重工作

Checklist

检查清单

Widget Best Practices

Widget最佳实践

  • const
    constructors on all static widgets
  • Proper 
    Key
    on list items
  • ConsumerWidget
    for state-dependent widgets
  • No widget building inside 
    build()
    method
  • Extract reusable widgets to separate files
  • 所有静态Widget使用
    const
    构造函数
  • 为列表项设置正确的
    Key
  • 状态依赖Widget使用
    ConsumerWidget
  • 不在
    build()
    方法内构建Widget
  • 将可复用Widget提取到独立文件中

State Management

状态管理

  • Immutable state objects
  • select()
    for granular rebuilds
  • Proper provider scoping
  • Dispose controllers and subscriptions
  • Handle loading/error states
  • 使用不可变状态对象
  • 使用
    select()
    实现细粒度重构建
  • 正确设置Provider作用域
  • 销毁控制器和订阅
  • 处理加载/错误状态

Navigation

导航

  • GoRouter with typed routes
  • Auth guards via redirect
  • Deep linking support
  • State preservation across routes
  • 使用带类型路由的GoRouter
  • 通过重定向实现权限守卫
  • 支持深度链接
  • 跨路由保留状态

Performance

性能

  • Profile mode testing (
    flutter run --profile
    )
  • <16ms frame rendering time
  • No unnecessary rebuilds (DevTools check)
  • Images cached and resized
  • Heavy computation in isolates
  • 使用Profile模式测试（
    flutter run --profile
    ）
  • 帧渲染时间<16ms
  • 无不必要的重构建（DevTools检查）
  • 图片已缓存并调整大小
  • 繁重计算在隔离区执行

Testing

测试

  • Widget tests for UI components
  • Unit tests for business logic
  • Integration tests for user flows
  • Bloc tests with 
    blocTest()
  • 为UI组件编写Widget测试
  • 为业务逻辑编写单元测试
  • 为用户流程编写集成测试
  • 使用
    blocTest()
    编写Bloc测试

References

参考资料

TopicReference
Widget patterns, const optimization, responsive layoutWidget Patterns
Riverpod providers, notifiers, async stateRiverpod State Management
Bloc, Cubit, event-driven stateBloc State Management
GoRouter setup, routes, deep linkingGoRouter Navigation
Feature-based structure, dependenciesProject Structure
Profiling, const optimization, DevToolsPerformance Optimization
Widget tests, integration tests, mockingTesting Strategies
iOS/Android/Web specific implementationsPlatform Integration
Implicit/explicit animations, Hero, transitionsAnimations
Dio, interceptors, error handling, cachingNetworking
Form validation, FormField, input formattersForms
i18n, flutter_localizations, intlLocalization
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.
主题参考链接
Widget模式、const优化、响应式布局Widget Patterns
Riverpod提供者、通知器、异步状态Riverpod State Management
Bloc、Cubit、事件驱动状态Bloc State Management
GoRouter配置、路由、深度链接GoRouter Navigation
基于功能的结构、依赖管理Project Structure
性能分析、const优化、DevToolsPerformance Optimization
Widget测试、集成测试、模拟Testing Strategies
iOS/Android/Web特定实现Platform Integration
隐式/显式动画、Hero、过渡Animations
Dio、拦截器、错误处理、缓存Networking
表单验证、FormField、输入格式化器Forms
国际化、flutter_localizations、intlLocalization
Flutter、Dart、Material Design和Cupertino分别是Google LLC和Apple Inc.的商标。Riverpod、Bloc和GoRouter是其各自维护者开发的开源包。