Summary - Flutter internals
- Flutter course
- Expert
- Lesson 5/39
- 4 min
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 → RenderParagraphPractice Print the three trees
In main, with three separate print calls, print 'widget_tree', 'Element', 'RenderObject' in order.
Starter code
void main() {
// 'widget_tree', 'Element', 'RenderObject' üç ayrı print ile yazdır
}Sample solution
void main() {
print('widget_tree');
print('Element');
print('RenderObject');
}Expected output
widget_tree Element RenderObject
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 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 Correct answer
- The app restarts
Explanation: 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.
2 Order of the three trees
final trees = ['widget_tree', '____', 'RenderObject'];final trees = ['widget_tree', 'Element', 'RenderObject'];Explanation: The lifecycle order is widget_tree → Element → RenderObject; BuildContext is the element itself, and State is specific to StatefulWidget.
3 Three trees matches
| Term | Meaning |
|---|---|
widget_tree |
Carries widget definition |
Element |
Between widget and render |
RenderObject |
Layout/paint object |
rebuild |
Triggered when state changes |