Most Flutter state management tutorials teach you the syntax and stop there. This course teaches you the design; how to structure a Riverpod provider graph that scales, how to compose providers so that a single login event cascades through your entire app automatically, and how to make architectural decisions you can defend six months later when the codebase has grown and the team has doubled. Across 12 structured lessons, you build ShopWave: a production-quality Flutter e-commerce app with JWT authentication, a live product catalogue, an immutable shopping cart, a complete checkout and order flow, a three-tier dependency graph spanning 11 providers, structured error handling with Dio interceptors, shimmer loading states, and full unit tests using ProviderContainer with mock overrides. Every design decision is explained before it is written, every simplification is named honestly, and every concept earns its place by showing up again in a later lesson. By the time you reach lesson twelve, you will not just know how to use Riverpod, you will know how to think with it.
What You'll Build
A production-quality Flutter e-commerce app (ShopWave) with JWT authentication, a live product catalogue, a shopping cart, a complete checkout and order flow, and full unit tests — backed by a Serverpod REST API.
Prerequisites
- Basic Flutter widget knowledge (StatelessWidget, Column, ListView)
- Familiarity with Dart (async/await, classes, null safety)
- No Riverpod experience required
What You'll Learn
- Design a multi-tier Riverpod provider dependency graph from scratch
- Choose the right provider type for any state management scenario
- Implement JWT authentication with automatic session restore
- Build an immutable shopping cart with derived providers
- Compose providers so authentication cascades through the entire app
- Write unit tests for Riverpod Notifiers using ProviderContainer
- Handle API errors with typed AppError classes and global snackbars
Who This Is For
Flutter developers who know the basics and want to stop guessing at state management and start designing with it.
Lessons
Lesson 1
What Is State? (And Why Your App Keeps Breaking)
We establish the three types of Flutter state, explain why global state management exists, and introduce ProviderScope as the root of the Riverpod graph all before writing a single provider.
Lesson 2
Project Setup & First Provider
We scaffold ShopWave with a feature-first folder structure, write dioProvider as our first plain Provider, define AppConstants, and make the first ref.watch call in a real widget.
Lesson 3
Provider Types: The Full Map
We survey all five Riverpod provider types with a visual decision tree, introduce AsyncValue and its three states, and map each provider type to its role in the ShopWave architecture before writing any of them.
Lesson 4
ref Deep Dive — watch, read, and listen
We draw a hard line between ref.watch in build() for reactive subscriptions and ref.read in action methods for point-in-time access, cover ref.listen for side effects, and demonstrate ref.invalidate and ref.refresh with working examples.
Lesson 5
Authentication — Sealed State & Session Restore
We build the full auth feature: a sealed AuthState class with four compile-safe variants, AuthNotifier with login, logout, and startup session restore via shared_preferences, and go_router route protection with an auth redirect that fires automatically on state change.
Lesson 6
Products — AsyncNotifierProvider in Practice
We fetch a real product list from Serverpod using AsyncNotifierProvider, render all three AsyncValue states with AsyncValue.when(), add pull-to-refresh via ref.invalidate, and display product images with CachedNetworkImage.
Lesson 7
Product Detail — .family and .autoDispose
We introduce the .family modifier to create one parameterised provider per product ID, add .autoDispose so each instance cleans up on navigation, wire path parameters through go_router, and activate the Add to Cart placeholder on ProductDetailScreen.
Lesson 8
The Cart — Immutable State & Derived Providers
We build CartItem with copyWith, implement CartNotifier's four methods (addItem, removeItem, updateQuantity, clear) using always-new-list discipline, derive cartCountProvider with select() for fine-grained badge updates, and build CartScreen with quantity controls and a live grand total.
Lesson 9
Provider Composition — The Dependency Graph
We make the full ShopWave dependency graph explicit across three tiers, trace how one login event cascades through 11 providers automatically via authenticatedDioProvider, and build orderSummaryProvider and isCheckoutReadyProvider by composing cart and auth state into single derived values.
Lesson 10
Orders — placeOrder() and the Full Checkout Loop
We build the Order model with a price-snapshot OrderItem, implement OrderNotifier with build() for history and placeOrder() as an action method using AsyncValue.guard(), invalidate the cart on 201 Created, prepend the new order to state without a second network call, and complete the router with /checkout, /order-success/:id, and /orders.
Lesson 11
Error Handling & UX Polish
We add an ErrorInterceptor that classifies every DioException into a typed AppError sealed class with a human-readable userMessage, wire a global error snackbar via a root-level ref.listen, replace spinners with shimmer skeleton cards that mirror the real product layout, and handle 401 responses with automatic logout.
Lesson 12
Architecture Review & Testing
We review the complete ShopWave architecture (what worked, what has costs, and what we'd change at team scale), then write unit tests for CartNotifier with no overrides, ProductsNotifier with MockDio and FakeAuthNotifier, and error paths through AsyncError, before closing with a riverpod_generator preview and the five principles worth keeping.
Related Courses
