flutter-apply-architecture-best-practices

Structures Flutter applications using layered UI, Domain, and Data architecture with MVVM.

Updated Jul 23, 2025
One-click install
npx skills add https://github.com/derrik-fleming/dotfiles --skill flutter-apply-architecture-best-practices-derrik-fleming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-apply-architecture-best-practices
Source: https://github.com/derrik-fleming/dotfiles/tree/main/private_dot_agents/skills/flutter-apply-architecture-best-practices
Command: npx skills add https://github.com/derrik-fleming/dotfiles --skill flutter-apply-architecture-best-practices-derrik-fleming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter codebases often become unmaintainable when UI rendering, business logic, and data fetching are mixed together. This Skill provides a concrete layered architecture (UI, Logic, Data) with MVVM and Repository patterns so new projects start structured and existing ones can be refactored for scalability. ## Core Features & Use Cases - Layered Architecture Enforcement: Separates Views, ViewModels, Repositories, and Services with strict rules about what belongs in each layer. - Project Structure Template: Provides a hybrid folder layout grouping UI by feature and Data/Domain code by type under lib/. - Step-by-Step Feature Workflow: An 8-step checklist covering domain models, services, repositories, ViewModels, views, dependency injection, and testing. - Use Case: When adding a profile screen to a Flutter app, follow the workflow to create a UserRepository wrapping an ApiClient service, a ProfileViewModel extending ChangeNotifier, and a ProfileView using ListenableBuilder. ## Quick Start Ask the assistant to architect a new Flutter feature or refactor an existing screen using the layered MVVM and Repository pattern described in this skill.

Frequently Asked Questions about flutter-apply-architecture-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a Flutter app with clean architecture?▼

Divide the app into UI, Domain, and Data layers. Use MVVM in the UI layer with ChangeNotifier ViewModels, Repositories as the single source of truth in the Data layer, and optional Use Case classes for complex business logic between them.

What is the Repository pattern in Flutter?▼

A Repository consumes one or more Services, transforms raw API models into clean domain models, and handles caching, offline sync, and retries. It exposes domain models to ViewModels, isolating data access logic from the rest of the app.

When should I add a Domain layer with Use Cases in Flutter?▼

Add Use Case classes only when business logic is complex enough to clutter the ViewModel or must be reused across multiple ViewModels. For simple CRUD features, skip the Domain layer and let ViewModels call Repositories directly.

How do I connect a Flutter ViewModel to a widget?▼

Extend ChangeNotifier in the ViewModel and expose immutable state getters. In the View, wrap the widget tree in ListenableBuilder or AnimatedBuilder listening to the ViewModel, and call notifyListeners after state changes.

Which dependency injection approach does this Flutter architecture use?▼

Repositories and Use Cases are injected into ViewModels via constructors, and Services, Repositories, and ViewModels are registered in a dependency injection container such as provider or get_it during feature setup.