Flutter with FVM & Modern Patterns
Flutter version manager combined with modern architecture, performance, and accessibility patterns for high-fidelity applications.
🔒 Prerequisites (Mandatory)
This skill operates WITHIN the SDD framework. Before starting any technical execution:
0. Mode Check: Verify .hub-mode and apply token-distiller guidelines.
- Context Check: Rehydrate state by reading
.specs/project/STATE.md, .specs/project/MEMORY.md, and .specs/project/LEARNINGS.md.
- Spec Check: Does the
spec.md file exist with clear requirements and Acceptance Criteria (ACs)? (BDD mandatory for Medium+).
- Plan Check: Does the
plan.md file define the architecture and schemas, and include Mermaid diagrams?
- Contract Check: Was the
contract.md file established with validation sensors?
- Task Check: Is the task list in
.specs/project/tasks.md (or feature-specific) detailed and atomized?
Goal
FVM ensures the environment. This skill ensures Technical Excellence through:
| Pillar |
Main Focus |
| Dart 3+ |
Sealed classes, Pattern Matching, and Records for type safety. |
| Performance |
Rebuild optimization (MediaQuery.sizeOf), RepaintBoundaries, and Decomposition. |
| UX/Accessibility |
Semantics, touch targets (48x48), and dynamic contrast. |
| Resilience |
Global error capture and graceful failure handling. |
| Security |
OWASP Mobile Top 10 and secure Secrets management (--dart-define). |
Version Awareness
Recommended Version: Flutter Stable (latest available via FVM)
Check the installed and active project versions:
fvm list
fvm current
When to Use This Skill
Use this skill when:
- Initializing a new Flutter project or migrating to Dart 3+.
- Implementing complex business logic with State Management (Riverpod/Bloc).
- Optimizing screen performance with complex lists or animations.
- Ensuring the app is accessible via screen readers (TalkBack/VoiceOver).
- Setting up robust error handling and crash reporting.
- Managing secrets and API keys securely.
- Performing OWASP Mobile Top 10 security analysis.
Skip this skill when:
- The project does NOT use Flutter/Dart.
Workflow (4 Phases)
Phase 1: ENVIRONMENT — Configuration and Alignment
- SDK Version: Set with
fvm use stable.
- Rigorous Linting: Configure
analysis_options.yaml with strict-casts: true, strict-inference: true, and strict-raw-types: true.
Phase 2: PROJECT — Structure and Modernization
- State Modeling: Use
sealed class to represent states (Initial, Loading, Data, Error).
- Secrets Management: Create structure to receive keys via
--dart-define or .env (excluded from git).
- Error Boundaries: Configure
FlutterError.onError in main.dart.
Phase 3: DEVELOP — Quality and Performance
- Decomposition: Keep
build() methods under 100 lines.
- Selective Rebuilds: Prefer
MediaQuery.sizeOf(context) over MediaQuery.of(context).
- Accessibility: Add
semanticLabel to all critical visual elements.
- Testing: Cover sealed state transitions and error flows.
Phase 4: DEPLOY — Security and Resilience
- Crash Reporting: Ensure integration with Sentry/Crashlytics.
- Hardening: Run builds with
--obfuscate --split-debug-info.
- Validation: Verify that no
print statements remain (use debugPrint or log).
Output Structure
The execution of this skill results in the generation or update of the following artifacts:
| Artifact |
Location |
Description |
| FVM Config |
.fvm/fvm_config.json |
Definition of the SDK version for the team. |
| Analysis Options |
analysis_options.yaml |
Linting and static analysis rules. |
| Sealed States |
lib/features/*/domain/ |
Exhaustive state modeling. |
| Secure Secrets |
.env / main.dart |
Key management via environment. |
Quality Rules
DO:
- Use
sealed classes to ensure exhaustiveness in state handling.
- Use
const constructors aggressively to reduce GC pressure.
- Ensure touch targets are at least 48x48 dp.
- Use
RepaintBoundary on animations or heavy drawing widgets.
- Validate
context.mounted after any await.
DON'T:
- Do not use multiple booleans (
isLoading, hasError) for screen states.
- Do not use
print() in production; use the logging package or dart:developer.
- Do not ignore errors from
fvm flutter analyze.
- Do not store secrets directly in Dart code (hardcoded).
Reference Documentation
- Modern Dart Patterns — Sealed classes, Records, and Pattern Matching.
- Performance & Optimization — Rebuilds, RepaintBoundaries, and GC.
- Accessibility Guide — Semantics, Hit Targets, and Inclusive UX.
- Environment Setup — FVM and Strict Analyzer.
- Flutter Security Guide — OWASP and Secrets.
- Testing & Quality — State and Logic testing.
Prohibited
- Do Not Skip Accessibility: Features without semantic labels or small targets are considered incomplete.
- Do Not Ignore the Analyzer: Analysis errors prevent deployment.
- Do Not Use Global Flutter: Maintain project isolation via FVM.
version: "2.3.0"
feature_id: "HUB-ALIGNMENT"
phase: "VERIFY"
status: "COMPLETED"
last_update: "2026-05-06T13:16:19.364145Z"
evidence_checksum: "8e52f6a"
1---2name: flutter-fvm3description: Skill for professional Flutter development with FVM. Includes Dart 3+ patterns, optimized performance, mandatory accessibility, OWASP security, and resilience management (Error Handling).4---56# Flutter with FVM & Modern Patterns78> Flutter version manager combined with modern architecture, performance, and accessibility patterns for high-fidelity applications.910---1112## 🔒 Prerequisites (Mandatory)13This skill operates WITHIN the **SDD** framework. Before starting any technical execution:140. **Mode Check**: Verify `.hub-mode` and apply `token-distiller` guidelines.151. **Context Check**: Rehydrate state by reading `.specs/project/STATE.md`, `.specs/project/MEMORY.md`, and `.specs/project/LEARNINGS.md`.162. **Spec Check**: Does the `spec.md` file exist with clear requirements and Acceptance Criteria (ACs)? (BDD mandatory for Medium+).173. **Plan Check**: Does the `plan.md` file define the architecture and schemas, and include **Mermaid** diagrams?184. **Contract Check**: Was the `contract.md` file established with validation sensors?195. **Task Check**: Is the task list in `.specs/project/tasks.md` (or feature-specific) detailed and atomized?2021---22## Goal2324**FVM** ensures the environment. This skill ensures **Technical Excellence** through:2526| Pillar | Main Focus |27|-------|----------------|28| **Dart 3+** | Sealed classes, Pattern Matching, and Records for type safety. |29| **Performance** | Rebuild optimization (`MediaQuery.sizeOf`), RepaintBoundaries, and Decomposition. |30| **UX/Accessibility** | Semantics, touch targets (48x48), and dynamic contrast. |31| **Resilience** | Global error capture and graceful failure handling. |32| **Security** | OWASP Mobile Top 10 and secure Secrets management (`--dart-define`). |3334## Version Awareness3536**Recommended Version: Flutter Stable (latest available via FVM)**3738Check the installed and active project versions:3940```bash41fvm list42fvm current43```4445## When to Use This Skill4647Use this skill when:48- Initializing a new Flutter project or migrating to Dart 3+.49- Implementing complex business logic with State Management (Riverpod/Bloc).50- Optimizing screen performance with complex lists or animations.51- Ensuring the app is accessible via screen readers (TalkBack/VoiceOver).52- Setting up robust error handling and crash reporting.53- Managing secrets and API keys securely.54- Performing OWASP Mobile Top 10 security analysis.5556Skip this skill when:57- The project does NOT use Flutter/Dart.5859---6061## Workflow (4 Phases)6263### Phase 1: ENVIRONMENT — Configuration and Alignment641. **SDK Version**: Set with `fvm use stable`.652. **Rigorous Linting**: Configure `analysis_options.yaml` with `strict-casts: true`, `strict-inference: true`, and `strict-raw-types: true`.6667### Phase 2: PROJECT — Structure and Modernization681. **State Modeling**: Use `sealed class` to represent states (Initial, Loading, Data, Error).692. **Secrets Management**: Create structure to receive keys via `--dart-define` or `.env` (excluded from git).703. **Error Boundaries**: Configure `FlutterError.onError` in `main.dart`.7172### Phase 3: DEVELOP — Quality and Performance731. **Decomposition**: Keep `build()` methods under 100 lines.742. **Selective Rebuilds**: Prefer `MediaQuery.sizeOf(context)` over `MediaQuery.of(context)`.753. **Accessibility**: Add `semanticLabel` to all critical visual elements.764. **Testing**: Cover sealed state transitions and error flows.7778### Phase 4: DEPLOY — Security and Resilience791. **Crash Reporting**: Ensure integration with Sentry/Crashlytics.802. **Hardening**: Run builds with `--obfuscate --split-debug-info`.813. **Validation**: Verify that no `print` statements remain (use `debugPrint` or `log`).8283## Output Structure8485The execution of this skill results in the generation or update of the following artifacts:8687| Artifact | Location | Description |88|----------|-------------|-----------|89| **FVM Config** | `.fvm/fvm_config.json` | Definition of the SDK version for the team. |90| **Analysis Options** | `analysis_options.yaml` | Linting and static analysis rules. |91| **Sealed States** | `lib/features/*/domain/` | Exhaustive state modeling. |92| **Secure Secrets** | `.env` / `main.dart` | Key management via environment. |9394---9596## Quality Rules9798**DO:**99- Use `sealed` classes to ensure exhaustiveness in state handling.100- Use `const` constructors aggressively to reduce GC pressure.101- Ensure touch targets are at least 48x48 dp.102- Use `RepaintBoundary` on animations or heavy drawing widgets.103- Validate `context.mounted` after any `await`.104105**DON'T:**106- Do not use multiple booleans (`isLoading`, `hasError`) for screen states.107- Do not use `print()` in production; use the `logging` package or `dart:developer`.108- Do not ignore errors from `fvm flutter analyze`.109- Do not store secrets directly in Dart code (hardcoded).110111---112113## Reference Documentation1141151. **[Modern Dart Patterns](references/modern-dart-patterns.md)** — Sealed classes, Records, and Pattern Matching.1162. **[Performance & Optimization](references/performance-and-optimization.md)** — Rebuilds, RepaintBoundaries, and GC.1173. **[Accessibility Guide](references/accessibility-guide.md)** — Semantics, Hit Targets, and Inclusive UX.1184. **[Environment Setup](references/environment-setup.md)** — FVM and Strict Analyzer.1195. **[Flutter Security Guide](references/flutter-security-guide.md)** — OWASP and Secrets.1206. **[Testing & Quality](references/testing-and-quality.md)** — State and Logic testing.121122---123124## Prohibited125126- **Do Not Skip Accessibility**: Features without semantic labels or small targets are considered incomplete.127- **Do Not Ignore the Analyzer**: Analysis errors prevent deployment.128- **Do Not Use Global Flutter**: Maintain project isolation via FVM.129130---131132133134---135136<!-- @sdd-state -->137```yaml138version: "2.3.0"139feature_id: "HUB-ALIGNMENT"140phase: "VERIFY"141status: "COMPLETED"142last_update: "2026-05-06T13:16:19.364145Z"143evidence_checksum: "8e52f6a"144```