← ClaudeAtlas

flutter-apply-architecture-best-practiceslisted

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
izo/Ulk · ★ 1 · Data & Documents · score 68
Install: claude install-skill izo/Ulk
# 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