Mobile 1,937 installs

Architecting Flutter Applications

by flutter/skills

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

Skill content

Layered architecture framework for scalable Flutter apps with strict separation of concerns.

- Enforces three-layer structure (UI, Logic, Data) with unidirectional data flow and a single source of truth in the Data layer

- UI layer contains lean Views and ViewModels that transform domain models into presentation state; Logic layer (optional) handles complex business orchestration; Data layer divides strictly into stateless Services and caching Repositories

- Provides step-by-step feature implementation workflow from domain models through Services, Repositories, ViewModels, and Views, with validation via unit and widget tests

- Includes complete code examples demonstrating Service wrapping, Repository caching and transformation, ViewModel state management, and reactive View binding

Architecting Flutter Applications

Contents

- Core Architectural Principles

- Structuring the Layers

- Implementing the Data Layer

- Feature Implementation Workflow

- Examples

Core Architectural Principles

Design Flutter applications to scale by strictly adhering to the following principles:

- Enforce Separation of Concerns: Decouple UI rendering from business logic and data fetching. Organize the codebase into distinct layers (UI, Logic, Data) and further separate by feature within those layers.

- Maintain a Single Source of Truth (SSOT): Centralize application state and data in the Data layer. Ensure the SSOT is the only component authorized to mutate its respective data.

- Implement Unidirectional Data Flow (UDF): Flow state downwards from the Data layer to the UI layer. Flow events upwards from the UI layer to the Data layer.

- Treat UI as a Function of State: Drive the UI entirely via immutable state objects. Rebuild widgets reactively when the underlying state changes.

Structuring the Layers