Flutter Widget Architect
Installation
SKILL.md
Flutter Widget Architect
Structure Flutter widget trees and state so rebuilds start and stop exactly where intended and build() is a pure, cheap function of state. The costly failure this prevents is the rebuild storm: one text field changes, the entire screen re-runs build(), the frame budget blows past 16ms (60fps) or 8ms (120fps), and the user sees jank that profiling later traces to architecture, not to any single slow line.
Operating procedure
Order matters: decompose before optimizing subscriptions, because .select on a monolithic build() buys nothing.
Step 1: Gather inputs
Before restructuring a screen, establish:
- The screen or widget in question and where jank or excessive rebuilds appear (default: run DevTools rebuild tracking or
debugPrintRebuildDirtyWidgetsfirst and capture which widgets rebuild). - Existing state management - Riverpod, Bloc, provider, setState, or a mix (a mix inside one feature is itself the finding).
- Which state is local-ephemeral (a toggle, one text field) vs shared/async/tested.
- List sizes - anything that can exceed roughly 30 items must be lazy.
Label any performance claim not backed by DevTools as a guess.