Performance & Flutter DevTools — Flutter Course

What you'll learn

Find and prevent jank, excess rebuilds, leaks, slow startup, large assets, and regressions using profile mode and explicit budgets. 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 Frame budget in a production-shaped Flutter feature
Apply DevTools in a production-shaped Flutter feature
Apply Rebuild and repaint in a production-shaped Flutter feature
Apply CPU and memory 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
Frame budget	Time available to produce each smooth visual frame	Profile jank in profile mode on representative hardware
Repaint boundary	A boundary that can isolate paint work into a separate layer	Add only after paint profiling shows a stable subtree benefits
Retaining path	The reference chain keeping an object alive	Use memory snapshots to fix ownership rather than guessing at allocations

Professional workflow

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

Define the evidence-led performance budget 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 evidence-led performance budget slice

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

lib/lesson_grid.dart

class LessonGrid extends StatelessWidget {
  const LessonGrid({super.key, required this.lessons});
  final List<Lesson> lessons;

  @override
  Widget build(BuildContext context) => GridView.builder(
    gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 360,
      mainAxisExtent: 180,
      crossAxisSpacing: 12,
      mainAxisSpacing: 12,
    ),
    itemCount: lessons.length,
    itemBuilder: (context, index) => RepaintBoundary(
      key: ValueKey(lessons[index].id),
      child: LessonCard(lesson: lessons[index]),
    ),
  );
}

Production practice

Contract

Define the evidence-led performance budget 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

Optimizing debug-mode timings or adding const, caching, and repaint boundaries everywhere can increase complexity without improving the measured user journey.

Independent workshop

Extend the guided lab into a review-ready evidence-led performance budget feature that fits the running course portfolio app.

Your finished workshop must include:

Frame budget
DevTools
Rebuild and repaint
CPU and memory
Startup and app size
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

Frame budget: Profile jank in profile mode on representative hardware
Repaint boundary: Add only after paint profiling shows a stable subtree benefits
Retaining path: Use memory snapshots to fix ownership rather than guessing at allocations

Quick check

1. Which rule best applies to Frame budget?

2. Which rule best applies to Repaint boundary?

3. Which rule best applies to Retaining path?

Next: Security, Privacy & Safe Storage