Flutter Widgets lifecycle, widget tree and element tree.

Photo by Artur Shamsutdinov on Unsplash

Table Of Contents:

⦿ What are widgets? 🎯
⦿ Widget Lifecycle 🧬
⦿ Widget , Element and Render Object tree 🌲
⦿ How to check Widget tree of your Flutter app🔍

What are widgets? 🎯

Widgets are building blocks of a Flutter app. They are configurations for different parts of the UI. Widgets can be structuring elements, input elements , UI layouts , interactive elements , animations , assets , images , icons and custom widgets you can create yourself !

There are two types of widgets in flutter

• Stateless Widget : A Stateless Widget is built based on its own configuration and does not change dynamically
• Stateful Widget : Stateful Widget is built based on its own configuration but can change dynamically.

Widget Lifecycle 🧬

Stateless Widget lifecycle

Stateless widget is build with one class. It’s build method can be called in three different cases:

• When widget is created first time
• When it’s parent changes/updates
• When an InheritedWidget has changed

Stateful Widget lifecycle

The Stateful widget is declared with two classes, the Stateful Widget class and the State class. Stateful Widget is rebuilt when the widget’s configuration changes but State class persist. One thing to note is that when the Stateful Widget is removed from the tree and then inserted back, a new State object is created. Following are lifecycle events of a Stateful Widget :

⁍ initState() : This method is called once when the object is inserted into the tree

⁍ dispose() : Called when this object is removed from the tree permanently

⁍ didChangeDependencies() : Called when this State object changes

⁍ didUpdateWidget(Contancts oldWidget) : This method is triggered when the widget configuration changes

⁍ deactivate() : Called when this object is removed from the tree

⁍ build(BuildContext ctx) : This method is called multiple times and BuildContext contains information such as location of this widget in the widget tree.

⁍ setState() : Notifies the framework that the state of this object has changed and triggers the build for this State object and updates the UI.

Widget , Element and Render Object tree 🌲

When we compose widgets together , they create the widget tree. Its similar to how the DOM on the browser makes a tree structure. All the mounted elements that are rendered on the screen create the element tree. When you run a Flutter app the main function calls runApp() method. The runApp() function takes the given Widget and makes it the root of the widget tree. The flutter framework processes through all the widgets and each corresponding element is mounted. For each Element in the tree, Flutter will create a Render Object by calling createRenderObject() on a widget, creating a Render Object tree. Render Object knows how to size and paint the Widget and listens for input and hit-testing.

Stateless Widget and Element Trees 🍂

Each Stateless Widget has a corresponding stateless element. The Flutter framework makes a request from the widget using createElement method and then mounts the element to the element tree. Each element contains a reference back to the widget. The element triggers the widgets build method and checks for children widgets, and each child widget creates its own element to be mounted to the element tree.

Stateful Widget and Element Trees 🌱

Each stateful widget has a corresponding stateful element. The Flutter framework calls the createElement method to create the stateful element, and the stateful element is mounted to the element tree. Since this is a stateful
widget, the stateful element requests that the widget create a state object by calling the StatefulWidget class’s createState method. The stateful element now has a reference to the state object and the widget at the given location in
the element tree. The stateful element calls the state object widget’s build method to check for child widgets, and each child widget creates its own element and is mounted to the element tree.

How to check Widget tree of your Flutter app 🔍

The Flutter widget inspector helps you visualize and explore Flutter widget trees, and can be used for understanding existing layouts and diagnosing layout issues

To debug a layout issue, run the app in debug mode and open the inspector by clicking the Flutter Inspector tab on the DevTools toolbar.

This was a basic overview of Flutter widgets , Widget tree and element tree. Listed below are few resources for a deep dive of these concepts :

• How does Flutter actually work, internally?
• Beginning Flutter — Understanding the Widget Tree and Element Tree
• How Does Flutter Work? A Basic Guide
• How Flutter renders Widgets