Sometimes it can be so confusing and frustrating to differentiate between the MainAxisAlignment in Flutter and the CrossAxisAlignment. But then, here’s a detailed explanation and guide that would guide you to understand the MainAxisAlignment and CrossAxisAlignment.
The mainAxisAlignment
simply controls the children to show in the horizontal direction of the Row
, But controls the vertical direction of the Column
. Let’s look at the picture with its types.
For crossAxisAlignment
The direction of this parameter is the perpendicular with the mainAxisAlignment
. You can see the relationship between them.
These two alignment works mostly when you apply your ROW and COLUMN, therefore See it as
Column
- to center(or align) vertically, mainAxisAlignment is used.
- to center(or align) horizontally, crossAxisAlignment is used.
Row
- to center(or align) horizontally, mainAxisAlignment is used.
- to center(or align) vertically, crossAxisAlignment is used.
The Image below should give a better illustration on the difference between the MainAxis and CrossAxis.