Flutter 开发

其他社区

作者仓库星标 12,348
作者仓库 skills

解读按原文结构重写，命令、链接、术语均保留；右侧可核对作者原始 SKILL.md

原文结构

Quick Reference：原文以此为独立章节。
Widget Patterns：Purpose · Component State management (simple) · StateProvider + ConsumerWidget State management (complex) · NotifierProvider / Bloc
Performance Patterns：Purpose · Solution Prevent rebuilds · const constructors Selective updates · ref.watch(provider.select(...))

适用与边界

当前原文没有单列适用场景。
当前原文没有单列不适用场景或限制。

原文中的明确线索

要点：「A practical guide for building cross-platform applications with Flutter 3 and Dart.」、「Flutter, Dart, Material Design, and Cupertino are trademarks of Google LLC and Apple Inc.」
文件与命令：StateProvider、ConsumerWidget、NotifierProvider、Bloc、FutureProvider、AsyncNotifierProvider、StreamProvider、GoRouter

流狐整理：以上内容来自当前 SKILL.md 的章节与原词；未补写作者没有声明的工具、兼容性或能力。

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

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

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

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

State Management

Immutable state objects
select() for granular rebuilds
Proper provider scoping
Dispose controllers and subscriptions
Handle loading/error states

GoRouter with typed routes
Auth guards via redirect
Deep linking support
State preservation across routes

Performance

Profile mode testing (flutter run --profile)
<16ms frame rendering time
No unnecessary rebuilds (DevTools check)
Images cached and resized
Heavy computation in isolates

Testing

Widget tests for UI components
Unit tests for business logic
Integration tests for user flows
Bloc tests with blocTest()

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.

流狐档案作者与许可取自来源；运行、权限和网络为流狐检测或估算

流狐分类: 通用
作者声明 Agent: 未找到明确声明；不据此推断已兼容或已测试
静态检查: 88 / 100 · 启发式扫描，不代表运行安全
作者 / 版本 / 许可: @MiniMax-AI · 未声明 license
流狐 Token 估算: 低消耗
流狐接入估算: 即装即用
是否需要外部 API Key: 未发现要求
检测到的系统要求: 未声明
底层运行要求: 未声明
检测到的文件与系统行为: 只读
允许写入 / 修改
检测到的网络行为: 仅限本地
安装命令数: 无（仅作为资料）

档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。

需要注意： 未限定 allowed-tools，默认拥有全部工具权限。

输出预览 flutter-dev.preview

作者没有在当前 SKILL.md 中定义固定输出样例。

SKILL.md SKILL.md

# 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

…

证据边界与执行链路

作者原文负责流程事实；流狐只索引当前章节、要点、文件与命令。

章节    -> Quick Reference → Widget Patterns → Performance Patterns → Core Principles → Widget Optimization → State Management
要点    -> A practical guide for building cross-platform applications with Flutter 3 and Dart. · Flutter, Dart, Material Design, and Cupertino are trademarks of Google LLC and Apple Inc.
文件/命令 -> StateProvider · ConsumerWidget · NotifierProvider · Bloc · FutureProvider · AsyncNotifierProvider · StreamProvider · GoRouter
内容 SHA-256 -> 6f06e380b637

讨论

基于 GitHub Discussions。登录 GitHub 即可参与讨论、点赞、订阅更新。

原文结构

适用与边界

原文中的明确线索

Flutter Development Guide

Quick Reference

Widget Patterns

Performance Patterns

Core Principles

Widget Optimization

State Management

Layout

Performance

Checklist

Widget Best Practices

State Management

Navigation

Performance

Testing

References

讨论