Flutter Column and Row

Most common layout requirements are arrange the components (widgets in Flutter) vertically and/or horizontally. In Flutter we can use Row widget to arrange widgets horizontally (for example from right to left), and Column widget to arrange widgets vertically. ( for example from top to down)

Both Row and Column widgets are include children property what means they take a list of child widgets. (Not only one widget, more widgets) We should know that both widgets are not scrollable.

Alignment is very important part of the usage of these widgets. To arrange the widgets correctly, we should know which direction(axis) called Main Axis and wihch direction called Cross Axis.

• For Column; the left-to-right part is used as Cross Axis, and the top-down part is used as Main Axis.(The oposite of the row)
• For Row; the left-to-right part is used as MainAxis, and the top-down part is used as Cross Axis.(The oposite of the column)

MainAxisSize

This property demetermines that how much space should be occupied in the main axis. By default column takes full available height and row takes full available width.

It basically takes two values, min and max (default). When it sets to min, it will be the total size of the components it contains. When it sets to max , it covers the most possible area.

MainAxisAlignment

This property determines how the widgets position their children in the main axis. There are six(6) options affect enums for this property.

• start: Positions children near the beginning of the main axis. (Left for Row, top for Column)
• center: Positions children at the middle of the main axis.
• end: Positions children near the end of the main axis. (Right for Row, bottom for Column )

• spaceBetween: Positions children from the beginning of the main axis with equal spaces between them.(First child is in the begining and the last child is in the end of the main axis)
• spaceAround: Positions children from the begining of the main axis with equal spaces between them like spaceBetween, difference is in this option there is a half space in the begining and the half space at the ending og the main axis
• spaceEvenly:Positions children from the begining of the main axis with equal spaces between them and also between the start and the end of the main axis.

CrossAxisAlignment

This property determines how the widgets position their children in the cross axis. There are five(5) options affect enums for this property.

• start: Positions children near the beginning of the cross axis. (Top for Row, left for Column)
• center: Positions children at the middle of the cross axis.
• end: Positions children near the end of the cross axis. (Bottom for Row, right for Column )

• stretch: Stretches children across the cross axis. (Top-to-bottom for Row, left-to-right for Column) Extend the filled space to all available space of the parent widget
• baseline: This option is usefull for Text widget only. For example there are Text widgets children in the Row with different size font, this property allign all text on the same baseline. (Text widget only, and requires that the textBaseline property is set toTextBaseline.alphabetic)

Using an Expanded widget makes a child of a Row or Column expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.

Very usefull video about Layout, thanks to Andrea.