Flutter Widget rendering process

Flutter abstracts the organization and rendering of view data into three parts: Widget, Element and RenderObject.

Widget

A Widget is a structured description of a view in the Flutter world. It is the basic logical unit of the control implementation. It stores configuration information about the view rendering, including layout, render properties, event response information, etc. In short, it is the configuration information of the view.

Flutter is designed to be immutable, so when the configuration of the view rendering changes, Flutter will choose to update the data by rebuilding the Widget tree, making it simple and efficient to build a data-driven UI.

Element

An Element is an instantiated object of a Widget that holds the context data for view building and is a bridge between structured configuration information and final rendering. A Widget can have multiple Element instances, such as two pages with the same text, so you can reuse the Widget for each Element.

The Flutter rendering process can be divided into three steps:

  • First, generate the corresponding Element tree from the Widget tree.
  • Then create the corresponding RenderObject and associate it with the Element. RenderObject property.
  • Finally, a RenderObject tree is built to complete the final rendering.

As you can see, Element holds both widgets and renderObjects. Neither Widget nor Element is actually responsible for the final rendering, only for calling the shots, and only the RenderObject does the real work.

Why have Element as a middle layer when you’re calling the shots?

This is due to the immutability of the Widget. When the Widget changes, the Element layer abstracts the Widget tree changes and only synchronizes the changes to the RenderObject, minimizing the modification of the rendering view tree and improving rendering efficiency. Even when it changes, the Element node that holds the Widget is marked as dirty. At the next drawing cycle, the Flutter triggers an update of the Element tree and updates itself and its associated RenderObject with the latest Widget data.

RenderObject

The rendering of object trees in Flutter is divided into four stages: layout, drawing, composition and rendering. Layouts and drawing are done in RenderObject. Flutter uses a depth-first mechanism to traverse the tree of rendered objects, determine the position and size of each object in the tree, and draw them on different layers. After drawing, Skia takes over the job of composition and rendering.

conclusion

The rendering process of a Flutter view consists of three parts: Widget, Element, and RenderObject. The Widget contains the configuration information of the view. Element is an instance of the Widget. RenderObject completes the layout and rendering of the configuration information obtained from the Element instance.

A few common questions:

  • The same Widget can describe nodes in multiple render trees at the same time and can be reused as a configuration file. Widgets and RenderObjects typically have a one-to-many relationship. (If RenderObject is present in the Widget.)
  • An Element is a fixed instance of a Widget that corresponds to a RenderObject. (If there is a RenderObject on Element.)
  • The isRepaintBoundary notation in the RenderObject makes them form Layer areas.
  • Is there a performance problem with nesting so many widgets? Widgets are just configuration files, stacked with a bunch of nested controls, and may be just a few more offsets and Size calculations for the final RenderObject.

reference

The Journey of flutter pit Filling