The descriptions of each prop used in this example are as follows:
Row
and Container
widget prop descriptions:
Row
widget props:
children
: This array defines the child widgets that will be included within the Row
. Each child can be a Flexible
widget.mainAxis
: Defines the main axis of the Row
widget, along which the child widgets will be arranged. It is horizontal by default.crossAxis
: Defines the cross axis of the Row
widget, determining how the child widgets will be aligned along this axis. For example, crossAxisAlignment: CrossAxisAlignment.center
positions the children at the center of the cross axis.Column
widget props:
children
: This array defines the child widgets that will be included within the Column
. Each child can be a Flexible
widget.mainAxis
: Defines the main axis of the Column
widget, along which the child widgets will be arranged. It is vertical by default.crossAxis
: Defines the cross axis of the Column
widget, determining how the child widgets will be aligned along this axis. For example, crossAxisAlignment: CrossAxisAlignment.center
positions the children at the center of the cross axis.Flexible
widget props:
flex
: Defines the proportion of space this widget will occupy within the Row
. For example, flex: 1
indicates a size relative to other flex
values.child
: The child element to be included within the Flexible
, typically a Container
.Layout description:
Row
contains two Container
children, each with a background color of red and blue respectively, and dimensions of 200x100.Row
uses Flexible
widgets to provide a flexible layout. The first Flexible
has a flex: 1
value, and the second has a flex: 2
value. This means the second container occupies twice the space of the first. Each contains a container with heights of 100 and backgrounds of green and purple respectively.This configuration allows users to flexibly arrange containers of various sizes and colors, and easily adjust text alignment.