Flutter: Three Trees

← all visualizations

How Flutter builds, diffs, and paints — step through with the arrows or ← → keys. Mirror page: Jetpack Compose: Two Trees.

Compose parallel:

Widget tree

immutable configs — rebuilt from scratch every build()

CounterPage
StatefulWidget
Column
RenderObjectWidget
Text("Hi")
→ expands to RichText
Text("$count")
→ expands to RichText

Element tree

persistent bookkeeping — lifecycle, state, the diff

dirtyStatefulElement
for CounterPage
State: count = 1
MultiChildRenderObjectElement
for Column · slot 0,1
LeafRenderObjectElement
for RichText "Hi"
LeafRenderObjectElement
for RichText "$count"

RenderObject tree

heavyweight machines — layout & paint live here

needsLayoutRenderFlex
constraints · size · performLayout()
RenderParagraph
"Hi" · size · offset
needsLayoutRenderParagraph
"$count" · size · offset
vsync→ build phase→ flushLayout→ flushPaint → Layer tree→ Scene → engine→ raster thread · Impeller→ pixels
Widget — immutable config (thrown away) Element — persistent bookkeeping RenderObject — layout & paint machine frame pipeline (Flutter's own engine)