State Management & Dependency Injection — Flutter Course

What you'll learn

Model immutable view state and unidirectional flow with Listenables, ChangeNotifier, Provider, commands, and scoped rebuilds. 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 State categories in a production-shaped Flutter feature
Apply Unidirectional flow in a production-shaped Flutter feature
Apply Listenable APIs in a production-shaped Flutter feature
Apply Provider DI 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
View state	Immutable data already shaped for rendering	Expose one coherent snapshot rather than many loosely coordinated flags
Command	An explicit operation triggered by a user event	Own concurrency and result handling outside the widget
Dependency injection	Collaborators are supplied rather than found globally	Inject abstract boundaries at construction so tests can provide fakes

Professional workflow

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

Define the unidirectional view-model state 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 unidirectional view-model state slice

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

lib/ui/course_view_model.dart

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

  CourseViewState state = const CourseViewState.loading();

  Future<void> load() async {
    if (state.loading) return;
    state = const CourseViewState.loading();
    notifyListeners();
    try {
      state = CourseViewState.ready(await repository.getCourses());
    } on Exception {
      state = const CourseViewState.failed('Could not load courses');
    }
    notifyListeners();
  }
}

Production practice

Contract

Define the unidirectional view-model state 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

Reading repositories from global singletons makes ownership, environment configuration, disposal, and isolated tests unnecessarily difficult.

Independent workshop

Extend the guided lab into a review-ready unidirectional view-model state feature that fits the running course portfolio app.

Your finished workshop must include:

State categories
Unidirectional flow
Listenable APIs
Provider DI
Immutable view state
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

View state: Expose one coherent snapshot rather than many loosely coordinated flags
Command: Own concurrency and result handling outside the widget
Dependency injection: Inject abstract boundaries at construction so tests can provide fakes

Quick check

1. Which rule best applies to View state?

2. Which rule best applies to Command?

3. Which rule best applies to Dependency injection?

Next: Platform APIs, Plugins & Platform Channels