Styling, Themes & Assets — Flutter Course

What you'll learn

Create a consistent Material 3 design system with color schemes, typography, theme extensions, images, fonts, and icons. 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 Material 3 in a production-shaped Flutter feature
Apply ThemeData in a production-shaped Flutter feature
Apply Color and type in a production-shaped Flutter feature
Apply Theme extensions 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
ColorScheme	Semantic colors for roles such as primary, surface, and error	Style by role so light, dark, and high-contrast variants remain coherent
Theme extension	A typed home for custom design tokens	Use instead of global constants when tokens should participate in theme changes
Asset resolution	Flutter selects an appropriate density variant	Provide required variants and define fit, loading, and error behavior

Professional workflow

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

Define the Material 3 design system 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 Material 3 design system slice

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

lib/app_theme.dart

ThemeData courseTheme(Brightness brightness) {
  final colors = ColorScheme.fromSeed(
    seedColor: const Color(0xFF03A9F4),
    brightness: brightness,
  );
  return ThemeData(
    useMaterial3: true,
    colorScheme: colors,
    textTheme: const TextTheme(
      headlineSmall: TextStyle(fontWeight: FontWeight.w700),
    ),
    inputDecorationTheme: const InputDecorationTheme(
      border: OutlineInputBorder(),
    ),
  );
}

Production practice

Contract

Define the Material 3 design system 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

Scattering literal colors and text styles through widgets prevents consistent dark mode, accessibility review, and future brand changes.

Independent workshop

Extend the guided lab into a review-ready Material 3 design system feature that fits the running course portfolio app.

Your finished workshop must include:

Material 3
ThemeData
Color and type
Theme extensions
Assets and fonts
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

ColorScheme: Style by role so light, dark, and high-contrast variants remain coherent
Theme extension: Use instead of global constants when tokens should participate in theme changes
Asset resolution: Provide required variants and define fit, loading, and error behavior

Quick check

1. Which rule best applies to ColorScheme?

2. Which rule best applies to Theme extension?

3. Which rule best applies to Asset resolution?

Next: Local State & StatefulWidget Lifecycle