Efficient Widget Rendering in Flutter: Understanding the Three Trees

Have you ever wondered how widgets are displayed in a Flutter application? Do you know what widgets are?

In this blog, I will try to answer these questions.

What is a Widget?

According to the definition given in Flutter docs:

‘‘Widgets are the central class hierarchy in the Flutter framework. A widget is an immutable description of part of a user interface. Widgets can be inflated into elements, which manage the underlying render tree.

Widgets themselves have no mutable state (all their fields must be final)’’

It says that widgets are immutable, but in an app, we do change widget’s properties during runtime. For example, we might change text on a button click, which means widgets are mutable! So what’s going on behind the scenes?

Let me help you understand it. Flutter creates three trees to render widgets on the screen :

1. Widget tree.

2. Element tree.

3. Render object tree.

Using these three trees, flutter renders objects efficiently.

Widget: A widget is an immutable description of part of a user interface. It describes the configuration for an element.

Element: It is an instantiation of a widget at a particular location in the tree. It manages the updating of the UI and controls everything.

RenderObject: All the widget values are passed to RenderObject. It handles the layout and painting of widgets.

But why three when you can only use one? This might not seem a good solution for one or two widgets. But when many widgets are there in an application it becomes more efficient. Let’s understand it in more detail through an example.

How Flutter render a widget

Let us assume that we have only one widget for now in our application: Text widget, a basic one.

You can see the output in the above image

When Flutter starts the app it calls the runapp function and adds the widget to the root of the tree. We have our widget tree with a single widget. The next thing that Flutter does is ask the widget to create a Render Object Element and it is added to the element tree, in the above image you can see that for the Text widget, LeafRenderObjectElement is created. Finally element creates the RenderObject i.e. RenderParagraph, adds it to the render object tree, and passes all the configuration(parameters which we provide to the widget) required to paint the widget.

So this was a simple scenario where a widget is rendered, but suppose we want to update text within the widget, what happens then?

Let’s take another example to understand how it will update the widget.

What happens when a widget changes?

To show what happens when we update the widget by calling runapp() twice, yes you read it correctly we will call runApp() twice which we should never do while building any application, this is just for your understanding of how the widget is rendered.

So here is the first look at our trees when the first runApp() function is called:

The same steps are performed as we looked at earlier.

Now, when the second runApp() is called with another RichText, so as we learned earlier that widgets are immutable, flutter sees that I have done a lot of work to paint that widget, let me see if I can reuse something and will call a function 

canUpdate(Widget oldWidget, Widget newWidget)

It will compare two widgets by comparing their runType and key, if both are the same then it will reuse element and RenderObject, if they are not then it has to do all the work again. In our case, we haven’t used any key and both widgets have the same runType so element and RenderObject won’t be destroyed. 

So what now? Next comes Element, it will see that you have changed the widget, so its configuration might also be changed, therefore Element will call updateRenderObject() which will update the RenderObject.

This same process is repeated for any type of widget you use in Flutter, I hope you have a better idea about how Flutter renders a widget.

Thank you.