Widget Tree vs Element Tree vs Render Object Tree in Flutter
Intro to Widgets
Before we jump in, if you’re just getting started with Flutter, you might have heard this saying— “Everything is a Widget in Flutter”. So, what does Widget mean? A widget is the smallest piece of component, the building block of flutter UI. It describes how the view should look like. If you have a text field in your UI, it’s a widget. If you have a button, it’s a widget. If you are familiar with React Js, widget is analogous to Component in React. A tree of widgets form the entire UI page in your application.
The 3 trees
Flutter framework makes use of three layers of trees under the hood to bring all the flutter magic to reality:
- Widget Tree
- Element Tree
- Render Object Tree
What’s a widget tree?
Widget tree is the representation of all widgets in the screen in a tree-like structure in hierarchical order. For example, if your app page has just a text widget, then the widget tree would look like this:
In my default flutter app setup (as shown above) , it has a MyApp Widget from where the execution starts. The MyApp widget contains a MaterialApp widget, which contains MyHomePage widget which has a Scaffold widget which has the Text widget that we defined. In our example, we just have one child for every parent. We could have multiple children for each levels in the Widget tree.
Let’s not worry about all the parent widgets for the Text widget for now, they are kind of like defaults. Any app would have similar widget hierarchy, to start with. And the Text widget that we added is at the bottom of the widget tree.
Now, just to give a glimpse of the parent of Text widget, Scaffold, every page in your app would have a Scaffold widget. Think of Scaffold widget like the work desk that you have. You arrange your laptop, notes, and other items in your work desk at different places at your desk. You need a work desk to arrange these items. Similarly, Scaffold is like the desk on which all the widgets are placed. You would have a Scaffold widget defined for each page in your app. In our case, we only have only one Text widget in our entire page inside the Scaffold.
Whenever a new widget gets added to the screen / removed at runtime, it would add or erase the widget from the widget tree accordingly.
And, that’s it. This is the widget tree. It’s just the tree of widgets present in the application page.
Element Tree
Element tree would have elements. For every widget in the widget tree, a corresponding elements would be instantiated in the element tree. There could be one or more elements instantiated for a single widget in the element tree. These elements correspond to the widget in the widget tree.
For the Scaffold widget, a corresponding Scaffold element would be created. For the Text widget, a corresponding Text element would be created.
Elements would be responsible in instantiation, maintaining the state and lifecycle of the widget. Think of widgets as the blue print for constructing the house and elements as actual real components required. They are instantiated, hold state and lifecycle of the widget.
Elements hold reference to the widget and also help the Render objects in identifying the properties to be used for painting the view.
The key differentiator is that widgets are immutable. In case of elements, all elements are mutable. Meaning, we could play around with elements’ state.
That’s it. Key takeaway is that elements are mutable.
Render Object Tree
Render Object tree is the tree of render objects. What are render objects? Render objects are the objects which are responsible for painting the UI on the screen. For example, the render object for a text element would take care of where the text has to be drawn, using which font, using which size etc.
Now, Render object tree is a tree of render objects and it would also be similar to element tree in structure and it would have render objects mapped to each element.
I hope this article gives an overview of the three trees in flutter.
