본문으로 건너뛰기
cccskills
무료GitHub에 공개

flutter-best-practices

Use when writing, reviewing, refactoring, or planning Flutter/Dart code — screens, features, project structure, state management, folders, widgets, cubits/blocs, repositories, services, or tests.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(6)

  • SKILL.md6.5 KB
  • references/architecture-layers.md5.6 KB
  • references/dart-coding-practices.md5.5 KB
  • references/enterprise-scale.md6.2 KB
  • references/feature-structure.md6.5 KB
  • references/localization-package-boundaries.md3.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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).

TaskRead
Design layers, decide where logic lives, MVVM, repositories/servicesreferences/architecture-layers.md
Create/organize a feature, folder structure, state management wiringreferences/feature-structure.md
Write or review Dart/Flutter code, widgets, tests, lintsreferences/dart-coding-practices.md
Multi-team/multi-package apps, monorepo, navigation, localization, API contracts, E2E testsreferences/enterprise-scale.md
App localization setup, reusable UI package string ownership, language picker visibilityreferences/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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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

  1. Prefer intent-revealing widgets over Container. Use Padding, SizedBox, ColoredBox, DecoratedBox, Center — they are const-able and self-describing. Container is fine only when combining several properties at once.
  2. 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).
  3. Prefix sliver-returning widgets with Sliver so misuse in the wrong scroll context is caught at a glance.
  4. 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.
  5. 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

  1. Read references/feature-structure.md and mirror the existing project's conventions for the feature directory.
  2. 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.
  3. Data comes in through a repository or typed API client — never fetched inside a widget.
  4. Add unit tests for the cubit/view model logic before wiring UI details.

Reviewing Flutter code

Check, in order of importance:

  1. Logic in the right layer (rule 1–2)? Any BuildContext in business logic?
  2. State modeled as immutable union types, all cases handled?
  3. Feature self-contained, or does it reach into another feature's internals?
  4. Widget choices (rule 6), modern Dart (rule 7), sliver naming (rule 8)?
  5. Tests present for logic, readable, minimal dependencies?
  6. Unexplained // ignore:, string-interpolated error logs, deprecated patterns still spreading?

Starting a new project

  1. Read references/architecture-layers.md for the layer blueprint and references/feature-structure.md for the folder skeleton.
  2. If more than ~2 teams or clearly separable domains are involved, read references/enterprise-scale.md and consider a Melos monorepo with one package per domain from day one.
  3. Set up strict lints early (leancode_lint or 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) + freezed for union-type states; bloc_presentation for one-off UI events
  • DI: provider scoped to widget subtrees (accepting its lack of compile-time safety as the lesser evil)
  • Boilerplate reduction: flutter_hooks
  • Monorepo: melos
  • Localization: flutter_localizations + intl with .arb files
  • 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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Use when working on accessibility, a11y, WCAG, ARIA, screen readers, keyboard nav, focus order, contrast, alt text, captions, reduced motion, or target sizes; not language/culture/device (see inclusive-design).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

evanca/flutter-ai-rules6532026년 10월 10일 업데이트

Use when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection, or deciding which layer owns logic.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

evanca/flutter-ai-rules6532026년 10월 10일 업데이트

bloc

무료

Use when creating a Cubit or Bloc, modeling state with sealed classes or status enums, wiring BlocBuilder/BlocListener/BlocProvider, writing bloc tests, or choosing between Cubit and Bloc.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

evanca/flutter-ai-rules6532026년 10월 10일 업데이트

Use when asked to review a PR, MR, branch, or diff, audit changed files, or check code quality.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

evanca/flutter-ai-rules6532026년 10월 10일 업데이트

Use when writing switch statements, refactoring if-else chains, creating data classes, choosing records vs classes, destructuring values, or modernizing pre-Dart-3 code.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

evanca/flutter-ai-rules6532026년 10월 10일 업데이트

Use when building AI agents in Dart, implementing Genkit flows or tools, integrating LLMs into Dart or Flutter applications, or using Genkit Dart plugins.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

evanca/flutter-ai-rules6532026년 10월 10일 업데이트

evanca의 스킬 모두 보기

이 스킬의 문제 신고