Flutter Alignment II: Main Axis Alignment VS Cross-Axis Alignment

In my last article, I tried to explain the main-axis alignment property I hope you
found it helpful. In this sequel, I would be explaining the cross-axis alignment property, But first off, do you notice that the cover image for this article is a globe?

A Geographical Approach To Alignments 🤓

if you understand how the globe works especially the lines running around and meeting at points, then understanding the cross-axis alignment property becomes easy, let's do a bit of geography here 👨‍🏫. In a globe, lines are running around and meet at points, these lines are called lines of longitude and latitude.
The line of longitude runs from top to bottom, while the line of latitude runs from left to right or vice versa if you like.

The Globe VS Cross-Axis Alignment

The cross-axis alignment property follows the longitude and latitude approach just with a twist, for example, a row's cross-axis is vertical and a column's cross axis is horizontal

let's dive into a bit of code now, for example

child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Taking Order For Delivery',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 40,
                      fontWeight: FontWeight.bold)),
              SizedBox(height: 20),
              Text('See resturants nearby by\nadding location',
                  style: TextStyle(
                      color: Colors.white, height: 1.4, fontSize: 18)),

The result would look something like this

from the result above, the child is a column and its cross-axis alignment is set to start you see how it sets the text to the left side of the screen you should be able to picture a kind of intersection from this result based on the illustration I shared earlier, you see it right? I told you alignments aren't that hard. If the child was a row, a similar rule would apply as well. Like the main-axis alignment, cross-axis alignment also has different properties there are as follows baseline, start, center, end, and stretch

Baseline: places the children along the specified cross-axis such that their baseline matches (note that baseline is always horizontal, so its usage is more suitable when the child is a column).

Start: it's places the children along the start of it's cross-axis

End: this is the opposite of the start property. If the cross-axis is horizontal it places the children by the right or left of the screen as specified by the text direction property, it could either be from the right to the left (which means the start-point is right and the end-point is the left) or left to right, also if the cross-axis is vertical it places the children by the bottom or top of the screen as specified by the vertical direction property.

Center: This places the children at the center of it's cross-axis

Stretch: This allows the children to fill the available space in its cross-axis

This is everything there is to know about cross-axis alignments, I hope you found it helpful.
Shalom 😁