Widget lifecycle and render logic in Flutter

1. Lifecycle logic

1.1 What is the life cycle

• System-wrapped callback methods
• What state does the developer know about the current widget

1.2 Life cycle functions

• Listening state
• Initializes state and data at the specified time
• Memory management logic

2. Widget lifecycle

2.1 Stateless

• Constructor of a widget
• Build method of widget

2.2 Statefull

• Constructor of a widget
• Constructor that calls _state in widget
• Init method of state
• State’s didChangeDependencies method, which is also called after the InheritedWidget changes.
• The build method of state is called when the setState method is called
• State’s deactivate method, called before the Dispose method
• The Dispose method is called when the widget is destroyed

3. Widget rendering logic

3.1 the widget subclass

Widget subclasses are StatefulWidget, StatelessWidget, and RenderObjectWidget. We use the first two a lot. RenderObjectWidget isn’t going to be used directly, but there are a couple of subclasses of RenderObjectWidget that we’ll use a lot.

3.2 RenderObjectWidget

Classes that inherit from RenderObjectWidget are added to render Tree. Row and Colum inherit indirectly from RenderObjectWidget.

Let’s look at the inheritance in detail:

Row and colom are inherit Flex, and Flex inherits MultiChildRenderObjectWidget MultiChildRenderObjectWidget RenderObjectWidget inheritance.

Note: Not all widgets will be rendered independently! RenderObjectWidget creates RenderObject objects only if it inherits RenderObjectWidget!

3.3 Three trees in Flutter

The Widget tree and the Render tree can be seen by the ‘Flutter Inspector’ on the right of the Android Studio window, as shown below:

3.4 the Element tree

In Framework.dart, there is a createElement () method in both StatelessWidget and StatefulWidget declaration documents,

StatelessWidget as shown in figure:

The nodes in the Element tree correspond to those in the widget tree. If a node in the widget changes, Element changes only the corresponding node, and only the changed node is rendered.

3.5 Rendering Logic

3.5.1 StatefullWidget Rendering logic

StatefullWidget inherits widgets, and the system implicitly calls the createElement and mount methods.

The createElement method implementation is a single line of code that calls the StatefulElement constructor with this, the StatefullWidget. As shown in figure:

A quick summary of the rendering process for StatefullWidget:

StatefullWidget creates a StatefulElement

• StatefulElement inheritance CompentElement
• Call the createState method to create the State
• Assign the widget to State
• Call state’s build method and pass itself out
• The context in the build is the Element of the Widget

3.5.2 StatelessWidget Rendering logic

The StatelessWidget is much simpler:

StatelessWidget creates StatelessElement

• StatelessElement inheritance CompentElement
• Basically, call the build method and pass itself out

3.5.3 RenderObjectWidget Render logic

RenderObjectWidget can be found by row or colum’s parent class,

RenderObjectWidget creates the RenderElement

• RenderElement create RenderObject
• Flutter calls the mount method
• Call the createRanderObject method