What are the three trees in Flutter's rendering architecture?
TL;DR: Flutter uses three synchronized trees: the Widget tree (immutable blueprints), the Element tree (mutable lifecycle managers), and the RenderObject tree (handles layout and painting).
Full Answer
Flutter's UI system is built on three distinct but synchronized trees that work together to render your app efficiently.
Widget Tree
Widgets are immutable configuration objects — they describe what should be on screen. Every time state changes, Flutter creates a new widget tree (cheaply, since widgets are lightweight).
Element Tree
Elements are the mutable, long-lived instances that sit between widgets and render objects. Each element holds a reference to its widget and its corresponding render object. The element tree is preserved across rebuilds when possible (reconciliation).
RenderObject Tree
RenderObjects perform the actual layout and painting. They are expensive to create, so Flutter keeps them alive across rebuilds whenever the type doesn't change.
The key insight is that only the widget tree is rebuilt frequently. Flutter diffs the new widget tree against the element tree to decide what needs updating in the render tree — keeping redraws minimal.
Code Examples
You can observe element/render relationships via BuildContext
MyWidget RenderConstrainedBox
Common Mistakes
- ✗Confusing widgets with elements — widgets are blueprints, elements are live instances
- ✗Thinking setState recreates the entire render tree (only the widget tree is rebuilt cheaply)
Interview Tip
Draw the three trees on a whiteboard — it immediately shows you understand Flutter's internals beyond surface-level widget usage.