Flutter Layouts - Part 1

Flutter Layouts - Part 1

Understanding Column and Row layouts: MainAxisSize, MainAxisAlignment and CrossAxisAlignment

In Flutter, the layout of widgets in a Row or Column is crucial for creating well-structured user interface. To achieve this, you need to understand the concepts of MainAxisSize, MainAxisAlignment, and CrossAxisAlignment.

  1. mainAxisSize.
According to the Flutter Documentation, the MainAxisSize is a property that allows us to determine how much space a Row or a Column can occupy on their main axes.

The row's main axis is the horizontal axis while the column's main axis is the vertical axis.

The 2 possible set of values that mainAxisSize allows are:

  • MainAxisSize.min

With this setting, the children of the row or the column will be squeezed together, occupying enough space on their main axes.


  • MainAxisSize.max

When MainAxisSize is set to max, the children of the Row or Column will distribute space along their main axes, allowing them to fully utilize the available space.

  1. mainAxisAlignment
The MainAxisAlignment determines how the row and the column positions their children on the available space after the mainAxisSize is set.

There are 6 possible properties for the MainAxisAlignment:

  • mainAxisAlignment.start

This property aligns the children close to the start of the main axis.


  • mainAxisAlignment.end

This property aligns the children close to the end of the main axis.


  • mainAxisAlignment.center

This property aligns the children as close to the middle of the main axis.


  • mainAxisAlignment.spaceBetween

This property evenly spaces the children on their main axes.


  • mainAxisAlignment.spaceAround

This setting evenly spaces the children while reducing half of the space before and after the first and last widgets.


  • mainAxisAlignment.spaceEvenly

It divides the extra space evenly between the widgets and before and after the children.


  1. crossAxisAlignment:
The crossAxisAlignment determines how the row and the column positions their children on their cross axes.

There are five possible values for CrossAxisAlignment:

  • CrossAxisAlignment.start

This aligns the children at the start of the cross axis.


  • CrossAxisAlignment.end

It aligns the children at the end of the cross axis.


  • CrossAxisAlignment.center

This property centers the children along the cross axis.


  • CrossAxisAlignment.stretch

It stretches the children across the cross axis. For example, in a Row, it stretches from top to bottom.


  • CrossAxisAlignment.baseline

This property aligns characters according to their baselines, which is useful for text elements.

Wrapping Up

And that’s it guys! I hope you have a better understanding of Flutter layouts: MainAxisSize, MainAxisAlignment and CrossAxisAlignment!

About Me

I am Zaahra, a Google Women Techmakers Ambassador who enjoy mentoring people and writing about technical contents that might help people in their developer journey. I also enjoy building stuffs to solve real life problems.

To reach me:

LinkedIn: https://www.linkedin.com/in/faatimah-iz-zaahra-m-0670881a1/

X (previously Twitter): _fz3hra

GitHub: https://github.com/fz3hra


Umme Faatimah-Iz-Zaahra Mujore | Google Women TechMakers Ambassador | Software Engineer