Flutter Widget Architecture & Composition Patterns

Core Philosophy

1. Composition Over Inheritance — Build complex UIs by combining simple, focused widgets rather than creating deep inheritance hierarchies. Each widget should have a single responsibility.

2. Immutability as Default — Widgets are immutable configuration objects. State lives in State classes, not widgets. This enables efficient rebuilds and predictable behavior.

3. BuildContext is Scope — BuildContext represents a location in the widget tree. Use it to access ancestors (Theme, MediaQuery, InheritedWidgets) and manage lifecycle. Never store BuildContext across frames.

4. Keys Solve Identity — Keys explicitly tell Flutter which widget corresponds to which Element when the tree changes. Use them strategically for lists, reordering, and state preservation.

5. Constraints Flow Down, Sizes Flow Up — The layout system is unidirectional. Parent constraints determine child possibilities; children report their sizes. Understand this to debug layout issues.

Quick-Start: Common Problems