Deep dive into Flutter — Trees!

4 min readAug 18, 2021

Nature is so beautiful with different types of trees, flowers, etc. Even Flutter is beautiful and has 3 types of trees 😉! Let’s see what are those and how do they affect development.

Flutter framework has 3 different trees that are responsible for app rendering and different things under the hood! The 3 trees that make the Flutter framework beautiful and strong are:

Widget Tree
Element Tree
Render Object Tree

All these trees have different responsibilities but work on a common goal: Fast UI rendering and development! Let’s see them one by one.

Widget Tree

Those who are working in Flutter would already know what Widget is. But, if you are completely new, Widget can be considered as the smallest UI component that you can use to show on the device screen. Now, the widget tree is a tree that will be created based on how you design your screen and how you are adding widgets to your screen. So you can consider the Widget Tree as the most simple tree in Flutter!
Let’s say you have a Center() widget and inside it, you have a Text() widget as a child so your Widget tree will have Center as root and Text as its child.

Element Tree

For each widget that you create in Widget Tree, the Flutter framework will create an element into Element Tree using the createElement() method. An Element represents the use of a widget to configure a specific location in the tree. This element will depict whether the widget is a Stateless Element or a Stateful Element. The element can change if the parent widget rebuilds and creates a new widget for this location. So let’s say you have an AppBar widget, then it is a Stateless Element so Flutter will create a Stateless Element for the AppBar widget.

Render Object Tree

RenderObject is the one that is visible on the screen. For each element in the Element Tree, the Flutter framework creates a RenderObject using the createRenderObject() method on a Widget. RenderObjects store basic details of widgets like child position, basic layout, paint protocols, etc. However, it doesn’t define how many children a parent will have or where the child will be positioned in the cartesian system. Hence, when the Flutter framework renders or draws your UI, it looks at the Render Object Tree instead of Widget or Element Tree because Render Tree is the one who controls all the properties of the widget! This is the reason why re-instantiating the Render Object Tree is heavy and costlier!

Conclusion

Widget Tree contains all the widgets that you use in Flutter and holds the configuration of a UI!
Element tree represents the use of a widget to configure a specific location in the tree and contains a piece of UI (Stateless element or Stateful element)!
Render Object Tree or Render Tree holds the properties of the widget along with paint protocols and is responsible for painting what you view on the screen!