flutter-apply-architecture-best-practices

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

By flutter · 35,055 installs

npx skills add flutter/agent-plugins --skill flutter-apply-architecture-best-practices

Source repository · Upstream listing

Architecting Flutter Applications Contents [Architectural Layers]( architectural layers) [Project Structure]( project structure) [Workflow: Implementing a New Feature]( workflow implementing a new feature) [Examples]( examples) Architectural Layers Enforce strict Separation of Concerns by dividing the application into distinct layers. Never mix UI rendering with business logic or data fetching. UI Layer (Presentation) Implement the MVVM (Model View ViewModel) pattern to manage UI state and logic. Views: Write reusable, lean widgets. Restrict logic in Views to UI specific operations (e.g., animations, layout constraints, simple routing). Pass all required data from the ViewModel. ViewModels: Manage UI state and handle user interactions. Extend ChangeNotifier (or use Listenable ) to expose state. Expose immutable state snapshots to the View. Inject Repositories into ViewModels via the constructor. Data Layer Implement the Repository pattern to isolate data access logic and create a single source of truth. Services: Create stateless classes to wrap external APIs (HTTP clients, local databases, platform plugins). Return raw API models or Result wrappers. Repositories: Consume one or more Services. Transform raw API models into clean Domain Models. Handle caching, offline synchronization, and retry logic. Expose Domain Models to ViewModels. Logic Layer (Domain Optional) Use Cases: Implement this layer only if the application contains complex business logic that clutters the ViewModel, or if logic must be reused across multiple ViewModels. Extract this logic into dedicated Use Case (interactor) classes that sit between ViewModels and Repositories. Project Structure Organize the codebase using a hybrid approach: group UI components by feature, and group Data/Domain components by type. Workflow: Implementing a New Feature Follow this sequential workflow when adding a new feature to the application. Copy the checklist to track progress. Task Progress [ ] Step 1: Define Domain Models. Create immutable data classes for the feature using freezed or built value . [ ] Step 2: Implement Services. Create or update Service classes to handle external API communication. [ ] Step 3: Implement Repositories. Create the Repository to consume Services and return Domain Models. [ ] Step 4: Apply Conditional Logic (Domain Layer). If the feature requires complex data transformation or cross repository logic: Create a Use Case class. If the feature is a simple CRUD operation: Skip to Step 5. [ ] Step 5: Implement the ViewModel. Create the ViewModel extending ChangeNotifier . Inject required Repositories/Use Cases. Expose immutable state and command methods. [ ] Step 6: Implement the View. Create the UI widget. Use ListenableBuilder or AnimatedBuilder to listen to ViewModel changes. [ ] Step 7: Inject Dependencies. Register the new Service, Repository, and ViewModel in the dependency injection container (e.g., provider or get it ). [ ] Step 8: Run Validator. Execute unit tests for the ViewModel and Repository. Feedback Loop: Run tests Review failures Fix logic Re run until passing. Examples Data Layer: Service and Repository UI Layer: ViewModel and View