Scalable Flutter Architecture — Flutter Course

What you'll learn

Separate views, view models, repositories, and services with immutable data, commands, abstract boundaries, and optional use cases. The lesson turns the APIs into a repeatable engineering workflow instead of a collection of isolated snippets.

By the end of this lesson, you'll be able to:

Apply UI and data layers in a production-shaped Flutter feature
Apply View and ViewModel in a production-shaped Flutter feature
Apply Repositories and services in a production-shaped Flutter feature
Apply Dependency inversion in a production-shaped Flutter feature

Core mental model

Connect each API to the decision it supports. Flutter code stays maintainable when state, ownership, lifecycle, and platform boundaries are explicit.

Concept	What it means	Decision rule
UI layer	Views render state and ViewModels own presentation logic	Keep data access and business rules out of widgets
Data layer	Repositories coordinate models while services wrap external sources	Expose domain-oriented repository contracts
Domain layer	Optional use cases hold complex or repeated business logic	Add only when ViewModels become crowded or logic is reused

Professional workflow

Work in small vertical slices and keep behavior observable from the first iteration.

Define the layered course feature boundary: user goal, inputs, visible states, ownership, and expected failures.
Build the smallest working vertical slice with typed data and explicit dependencies.
Represent loading, empty, success, and failure behavior where the feature can encounter them.
Verify logic away from the UI, then exercise the rendered behavior at its public boundary.
Inspect lifecycle, accessibility, performance, security, and platform behavior before widening the feature.
Refactor only after behavior is protected by repeatable evidence.

Protect the frame

Keep build methods predictable, move side effects to explicit owners, and measure before introducing caches, isolates, or architectural layers.

Guided Flutter lab

Build a focused layered course feature slice

This compact example keeps the important ownership and data-flow decisions visible so the behavior is easy to extend and test.

lib/features/course/course_view_model.dart

abstract interface class CourseRepository {
  Future<List<Course>> getPublished();
}

class CourseViewModel extends ChangeNotifier {
  CourseViewModel(this.repository);
  final CourseRepository repository;

  CourseViewState state = const CourseViewState.loading();

  Future<void> load() async {
    state = const CourseViewState.loading();
    notifyListeners();
    final courses = await repository.getPublished();
    state = courses.isEmpty
        ? const CourseViewState.empty()
        : CourseViewState.ready(courses);
    notifyListeners();
  }
}

Production practice

Contract

Define the layered course feature inputs, outputs, owner, lifecycle, visible states, and platform assumptions before selecting APIs or packages.

Verification

Protect pure rules with unit tests and the rendered public contract with widget or integration evidence; include one unavailable or failure case.

Operations

Keep dependencies replaceable, log actionable context without user secrets, and measure user-visible behavior before optimizing.

Common failure mode

Adding use cases, repositories, mappers, and interfaces to every one-line operation creates ceremony; layers should protect real change boundaries.

Independent workshop

Extend the guided lab into a review-ready layered course feature feature that fits the running course portfolio app.

Your finished workshop must include:

UI and data layers
View and ViewModel
Repositories and services
Dependency inversion
Commands
Automated verification and a short design note

Definition of done

Demonstrate the happy path, an empty or unavailable state, and at least one failure path. Add an automated check and a short note explaining one design decision.

Recap & quick check

Key takeaways

UI layer: Keep data access and business rules out of widgets
Data layer: Expose domain-oriented repository contracts
Domain layer: Add only when ViewModels become crowded or logic is reused

Quick check

1. Which rule best applies to UI layer?

2. Which rule best applies to Data layer?

3. Which rule best applies to Domain layer?

Next: Advanced State Management Patterns