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.
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.
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
- to center(or align) vertically, mainAxisAlignment is used.
- to center(or align) horizontally, crossAxisAlignment is used.
- 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.