Phase 3 · Flutter FoundationsModule 23~90 min read

Project: Complete Local App

Combine Dart and Flutter foundations in an accessible, themed CRUD application with persistence, tests, and a refactoring retrospective.

What you'll learn

Combine Dart and Flutter foundations in an accessible, themed CRUD application with persistence, tests, and a refactoring retrospective. 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 Requirements in a production-shaped Flutter feature
  • Apply Feature slices in a production-shaped Flutter feature
  • Apply CRUD in a production-shaped Flutter feature
  • Apply Local persistence 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.

ConceptWhat it meansDecision rule
Vertical sliceOne complete user journey across real boundariesShip create-view-complete before expanding every screen
Acceptance criterionAn observable statement of completed behaviorWrite it before implementation and prove it afterward
RetrospectiveA structured review of outcomes and decisionsRecord evidence, surprises, and the next highest-value change

Professional workflow

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

  1. Define the local productivity application boundary: user goal, inputs, visible states, ownership, and expected failures.
  2. Build the smallest working vertical slice with typed data and explicit dependencies.
  3. Represent loading, empty, success, and failure behavior where the feature can encounter them.
  4. Verify logic away from the UI, then exercise the rendered behavior at its public boundary.
  5. Inspect lifecycle, accessibility, performance, security, and platform behavior before widening the feature.
  6. 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 local productivity application slice

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

project/local_app_brief.txt
PROJECT — Accessible Habit Tracker

Vertical slice:
1. Create a habit with a validated name and schedule.
2. Persist it locally and render an empty/error/ready state.
3. Mark today complete and update progress immutably.
4. Restore the state after an app restart.

Evidence:
- Unit tests for schedule and streak rules
- Widget test for the keyboard-only create flow
- Dark theme, 200% text scale, and narrow-window checks
- README with one architecture decision and retrospective

Production practice

Contract

Define the local productivity application 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

Building every model and screen before one complete journey delays feedback and encourages architecture for requirements that may never arrive.

Independent workshop

Build and present the complete habit tracker vertical slice, then add only the next feature justified by user value or a discovered design pressure.

Your finished workshop must include:

  • Requirements
  • Feature slices
  • CRUD
  • Local persistence
  • Accessibility
  • 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

  • Vertical slice: Ship create-view-complete before expanding every screen
  • Acceptance criterion: Write it before implementation and prove it afterward
  • Retrospective: Record evidence, surprises, and the next highest-value change

Quick check

1. Which rule best applies to Vertical slice?

2. Which rule best applies to Acceptance criterion?

3. Which rule best applies to Retrospective?

Next: Navigation, Routing & Deep Links