Column Row

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:

  • The first Row contains two Container children, each with a background color of red and blue respectively, and dimensions of 200x100.
  • The second 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.