Life cycle of the Flutter widget, widget tree and element tree.

Photograph: Artur ShamsutdinovonUnsplash

Directory.

⦿ What is a widget? 🎯⦿Widget Life cycle 🧬⦿Widget, element, and render object tree 🌲 🧬 How to check the Widget tree of a Flutter application

What is a Widget? 🎯

The widget is the building block of the Flutter application. They are configurations for different parts of the UI. Widgets can be structural elements, input elements, user interface layouts, interactive elements, animations, assets, images, ICONS, and custom widgets you can create yourself!

In Flutter, there are two types of widgets

  • Stateless widgets. Stateless Widgets are built on their own configuration and do not change dynamically.
  • Stateful Widget: A stateful Widget is built on its own configuration, but can change dynamically.

Gadget life cycle 🧬

The life cycle of a stateless Widget

Stateless widgets are built using a class. Its build method can be invoked in three different situations.

  • When the widget is first created
  • When its parent class changes/updates
  • When an InheritedWidget changes

The life cycle of a stateful widget

A stateful widget is declared in two classes, the stateful Widget class and the state class. When the widget’s configuration changes, the Stateful Widget is rebuilt, but the State class persists. One thing to note is that when a stateful Widget is removed from the tree and then inserted, a new State object is created. The following are the life cycle events for a stateful widget.

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

⁍ Dispose (): Called when the object is permanently removed from the tree.

⁍didChangeDependencies(): called when the status object changes.

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

⁍deactivate(): called when the object is removed from the tree.

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

⁍setState(): Notifies the framework that the state of the object has changed, triggers the construction of the state object, and updates the UI.

Widgets, elements, and render object trees 🌲

When we put widgets together, they form a Widget tree. It is similar to how the DOM in a browser forms a tree structure. All the elements installed on the screen are rendered to form an element tree. When you run a Flutter application, the main function calls the runApp() method. The runApp() function takes the given Widget and makes it the root of the Widget tree. The Flutter framework handles all widgets, and each corresponding element is installed. For each element in the tree, the Flutter will create a RenderObject by calling createRenderObject() on the Widget, creating a RenderObject tree. The Render Object knows how to size and draw widgets, and listens for input and click tests.

Stateless Widgets and element trees 🍂

Each stateless Widget has a corresponding stateless element. The Flutter framework uses the createElement method to make a request from the Widget and then mount that element into the element tree. Each element contains a reference to the Widget. This element triggers the widget’s build method and checks the sub-widgets, each of which creates its own element and mounts it to the element tree.

Stateful parts and element trees 🌱

Each stateful widget has a corresponding stateful element. The Flutter framework calls the createElement method to create the stateful element, which is installed into the element tree. Since this is a stateful part, a stateful element requires the part to create a state object by calling the createState method of the stateful part class. Stateful elements now have a reference to the state object and the widget at a given location in the element tree. Stateful elements call the build method of the state object Widget to examine the child widgets, each of which creates its own element and is mounted to the element tree.

How to check the Widget tree for your Flutter application 🔍

The Flutter component Inspector helps you visualize and explore the Flutter component tree and can be used to understand existing layouts and diagnose layout problems

To debug the layout problem, run the application in debug mode and open the Flutter inspector by clicking the Flutter Inspector TAB on the DevTools toolbar.

This is a basic overview of the Flutter widget, widget tree, and element tree. Listed below are some resources that provide insight into these concepts.

  • How does Flutter work on the inside?
  • Beginner to Flutter – Learn about widget trees and elemental trees
  • How does Flutter work? A basic guide
  • How does Flutter render widgets