Column

The Column widget is used to create a vertical layout. It is one of the most used widgets.

For a column the Main Axis and the Cross Axis are two important column properties.

The Main Axis runs vertically, and the Cross Axis runs horizontally. By default, all the children inside the column will be arranged in a vertical fashion.

The Main Axis for a Column Widget is the vertical axis, so adjusting this will change how the child widgets are vertically distributed in the column.

You can adjust the main axis alignment using the following options:

Start (

): Place children elements as close to the beginning as possible.

Center (

): Place children elements as close to the middle as possible.

End (

): Place children elements as close to the end as possible.

Space Evenly (

): Evenly space children elements.

Space Between (

): Place the free space evenly between the children.

Adjust the Cross Axis Alignment

The Cross Axis for a Column Widget is the horizontal axis, so adjusting this will change how the child widgets are horizontally distributed in the column.

You can adjust the cross axis alignment using the following options:

Start (

): Place child elements as close to the beginning as possible.

Center (

): Place child elements as close to the middle as possible.

End (

): Place child elements as close to the end as possible.

Stretch (

): Make the child fill the cross axis (horizontally).