Summary - Flutter internals

Trace a widget's life across all three trees.

Summary - Flutter internals

When a widget is created, three trees work together: the widget_tree carries the definition, the Element binds the widget to the render layer, and the RenderObject does layout and paint. When the widget rebuilds, the Element is updated, and the RenderObject is refreshed only when needed.

// Widget → Element → RenderObject
MaterialApp → _RawViewElement → RenderView
  Scaffold → _ScaffoldElement → RenderFlex
    Text → _TextElement → RenderParagraph

Exercise Print the three trees

In main, with three separate print calls, print 'widget_tree', 'Element', 'RenderObject' in order.

Show example solution

void main() {
  print('widget_tree');
  print('Element');
  print('RenderObject');
}

Test yourself

What happens when a widget rebuilds?
- All trees are recreated from scratch
- Only the RenderObject is updated
- The Element is updated, the RenderObject is refreshed only when needed
- The app restarts
Show answer

The Element is updated, the RenderObject is refreshed only when needed — On rebuild, the new widget object is compared with the existing Element and the Element is updated; the RenderObject is refreshed only when layout or paint changes.

Order of the three trees

final trees = ['widget_tree', '____', 'RenderObject'];

Show answer

final trees = ['widget_tree', 'Element', 'RenderObject'];

Three trees matches

widget_tree

Carries widget definition
Element

Between widget and render
RenderObject

Layout/paint object
rebuild

Triggered when state changes

Next lesson: Profile mode

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies