How widgets render

There are three important trees in the Flutter rendering process:The Widget tree,The Element tree,Render tree. The Classes in the Render tree are all RenderObject subclasses. Only classes that inherit RenderObjectWidget will create RenderObject objects.

• When the Widget calls the constructor and implicitly calls the createElement method, the Element is added to the Element tree for administrative purposes, creating three types of elements:

  1. The StatelessWidget creates the StatelessElement(extends ComponentElement) and then calls the mount method, step by step, to call the Widget’s build method. Element holds widgets.

  StatefulWidget creates a StatefulElement(extends ComponentElement). To construct a StatefulElement, call the Widget’s createState method. Hold the State, let the State hold the Widget, and then call the mount method, step by step, to call the build method of State.

  RenderObjectWidget creates RenderObjectElement(extends Element), which holds the Widget. The framework calls this function when a newly created element is added to The tree for The first time. In the mount method, call the Widget’s createRenderObject method, add the RenderObject to Element, and add the RenderObject to the Render tree.