flutter-best-practices
Use when writing, reviewing, refactoring, or planning Flutter/Dart code — screens, features, project structure, state management, folders, widgets, …
它会碰到什么
这一栏是扫描器报的事实,不是结论。命中多不等于有毒(安全工具、规则库、示例脚本本来就会包含危险写法),命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系,需要你自己看。
技能内容
Flutter Best Practices
Standards for building maintainable Flutter apps, distilled from the official
Flutter architecture guide and LeanCode's experience shipping 40+ Flutter
projects (including a 30-developer banking app). Apply these when writing new
code; when touching existing code, prefer consistency with the surrounding
codebase and raise conflicts with these standards rather than silently
rewriting.
How to use this skill
Read the reference file that matches the task. Read more than one when tasks
overlap (e.g. a new feature touches both structure and coding style).
| Task | Read |
|---|---|
| Design layers, decide where logic lives, MVVM, repositories/services | [references/architecture-layers.md](references/architecture-layers.md) |
| Create/organize a feature, folder structure, state management wiring | [references/feature-structure.md](references/feature-structure.md) |
| Write or review Dart/Flutter code, widgets, tests, lints | [references/dart-coding-practices.md](references/dart-coding-practices.md) |
| Multi-team/multi-package apps, monorepo, navigation, localization, API contracts, E2E tests | [references/enterprise-scale.md](references/enterprise-scale.md) |
| App localization setup, reusable UI package string ownership, language picker visibility | [references/localization-package-boundaries.md](references/localization-package-boundaries.md) |
For a quick task (small widget fix, one-line review comment), the core rules
below may be enough on their own.
Core rules (always apply)
Architecture
- Separate UI from data. Two broad layers: UI (views + view models /
cubits) and Data (repositories + services). Dependencies point one way:
View → ViewModel → Repository → Service. Lower layers never import upper
layers. Repositories never depend on each other.
- Views hold no business logic. Widgets may contain show/hide
conditionals, animation, layout, and simple routing logic — nothing that
transforms or decides about data. All data logic lives in the view model
(or cubit/bloc), which has no access to BuildContext.
- Organize by feature, not by layer. Everything a feature needs — state
management, widgets, models — lives under one feature directory. Don't
create top-level blocs/, widgets/, models/ buckets that scatter a
feature across the tree.
- State is immutable and explicit. Model UI state as a sealed/union type
(initial / inProgress / failure / ready) so every case is handled
exhaustively. One-off effects (snackbars, navigation) are events, not
state.
- Add layers only when they pay for themselves. Start with
view-model → API client. Introduce a repository when you need caching,
offline, or merging sources. Introduce a use case only when logic merges
multiple repositories, is genuinely complex, or is reused by several view
models.
Coding
- Prefer intent-revealing widgets over
Container. UsePadding,
SizedBox, ColoredBox, DecoratedBox, Center — they are const-able
and self-describing. Container is fine only when combining several
properties at once.
- Use modern Dart. Pattern matching (
if (x case final v?)), switch
expressions with exhaustiveness, records and destructuring, collection
if/for/spreads instead of .add() loops, expression bodies for
pass-through async functions (no redundant async/await).
- Prefix sliver-returning widgets with
Sliverso misuse in the wrong
scroll context is caught at a glance.
- Tests tell a story. Use expressive matchers (
isEmpty,throwsA,
isA, completion) and minimize dependencies — plain Text/SizedBox
over design-system widgets in test fixtures. Test cubits/view models in
isolation from the widget tree.
- Every
// ignore:gets a reason on the same or preceding line. Log
errors with dedicated error/stackTrace parameters, never string
interpolation.
Workflow checklists
Adding a new feature/screen
- Read [references/feature-structure.md](references/feature-structure.md)
and mirror the existing project's conventions for the feature directory.
- Define the state as a union type first; then the cubit/view model; then
the widgets. Constructor-inject dependencies; scope them to the feature's
widget subtree.
- Data comes in through a repository or typed API client — never fetched
inside a widget.
- Add unit tests for the cubit/view model logic before wiring UI details.
Reviewing Flutter code
Check, in order of importance:
- Logic in the right layer (rule 1–2)? Any
BuildContextin business logic? - State modeled as immutable union types, all cases handled?
- Feature self-contained, or does it reach into another feature's internals?
- Widget choices (rule 6), modern Dart (rule 7), sliver naming (rule 8)?
- Tests present for logic, readable, minimal dependencies?
- Unexplained
// ignore:, string-interpolated error logs, deprecated
patterns still spreading?
Starting a new project
- Read [references/architecture-layers.md](references/architecture-layers.md)
for the layer blueprint and
[references/feature-structure.md](references/feature-structure.md) for the
folder skeleton.
- If more than ~2 teams or clearly separable domains are involved, read
[references/enterprise-scale.md](references/enterprise-scale.md) and
consider a Melos monorepo with one package per domain from day one.
- Set up strict lints early (
leancode_lintor equivalent + custom rules) —
retrofitting is far more expensive.
Package palette
Defaults that these standards assume (swap for project-local equivalents when
the codebase already uses something else):
- State:
bloc(Cubit) +freezedfor union-type states;
bloc_presentation for one-off UI events
- DI:
providerscoped to widget subtrees (accepting its lack of
compile-time safety as the lesser evil)
- Boilerplate reduction:
flutter_hooks - Monorepo:
melos - Localization:
flutter_localizations+intlwith.arbfiles - Lints:
leancode_lint - E2E/UI tests:
patrol
The official Flutter guide is state-management-agnostic (MVVM with
ChangeNotifier works too); what matters is the layer separation, not the
package. See the reference files for rationale and trade-offs.
想直接用这个技能?
本站把开放许可(MIT / Apache 等)的技能按仓库打包整理到网盘,点一下转存到你自己的网盘,不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接,不打包。