Flutter (22): Introduction to layout components

Time: Column:Mobile & Frontend views:337

Layout widgets typically contain one or more child widgets, and different layout widgets arrange (or layout) their child widgets in various ways, as shown in Table 4-1 below:

WidgetDescriptionUsage
LeafRenderObjectWidgetBase class for non-container widgetsThese are the leaf nodes of the widget tree and are used for widgets without child nodes. Basic widgets, such as Image, usually belong to this category.
SingleChildRenderObjectWidgetBase class for widgets with a single childThese widgets contain one child widget. Examples include ConstrainedBox, DecoratedBox, etc.
MultiChildRenderObjectWidgetBase class for widgets with multiple childrenThese widgets contain multiple child widgets. They generally have a children parameter that accepts a list of widgets, such as Row, Column, Stack, etc.

Layout widgets are widgets that directly or indirectly inherit from SingleChildRenderObjectWidget and MultiChildRenderObjectWidget. They typically have a child or children property to accept child widgets. The inheritance hierarchy can be visualized as Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget.

The RenderObjectWidget class defines methods for creating and updating a RenderObject, and its subclasses must implement these methods. For now, it's enough to understand that the RenderObject is the object responsible for the final layout and rendering of the UI interface. In other words, for layout widgets, the layout algorithm is implemented through the corresponding RenderObject. If you're interested in the principles of a particular layout widget introduced later, you can check its associated RenderObject implementation. For instance, the layout algorithm for the Stack (a layered layout) is implemented in the RenderStack object.

In this chapter, to give readers a quick overview of layout widgets, we won't dive into the details of RenderObject. Instead, the focus should be on understanding the layout characteristics of different layout widgets. Once you gain a basic understanding of Flutter, you can explore the specific principles and details of these widgets further if you're interested.