All language subtitles for 5. Understanding Column Alignmentf

Before we continue working on the app itself, let me play around with the column a bit because right

now, our two cards here, this blue card and the white card below there, are clearly positioned inside of

a column,

that is why we can have them above each other and we can also see that they seem to be centered.

The card with the chart in it takes the full width,

so here we don't really see the centering effect but we can clearly see it on our list of tx card.

It's in the middle horizontally, not vertically

and that is the default behavior indeed of a column.

Now let's go to the column widget and let's see what we can actually configure there.

Here, you see you have a cross axis alignment and a main axis alignment

and these are the two core configuration options which you have to configure how your column behaves

and you have the exact same options on a row by the way. Column and row are core widgets in Flutter,

they allow you to position items next to each other or above each other,

column allows you to position items vertically, row horizontally.

Now you do that positioning with the help of the so-called main axis and cross axis

and for a column, the main axis by default is from top to bottom, cross axis is from left to right.

So with these two configuration options, you can define how the items should be positioned inside of the

column, both regarding the vertical direction and the horizontal direction. For row it's the opposite,

there the main axis is left to right and the cross axis is top to bottom

and with these properties of column and row which you can set through their constructors, you have a broad

variety of options of how you want to position the items that you have inside your column or row.

Let's see an example, here's our column and now let's set the main axis alignment here too

and now what does this need here, which type of value?

It needs a main axis alignment value.

So let's enter main axis alignment and let the IDE help you.

You should get a couple of suggestions here

and as you see, there are a couple of static fields or to be precise, that actually now is a enum.

You know enum is that thing where you actually just have a couple of different options which are numbers

with human readable labels and then these numbers are interpreted internally, in this case by the column

widget.

So here we can set this to center, end

and so on.

Now the default actually is start,

let's see what happens if I set this to end.

If we do that,

now you see the items are pushed all the way to the end of the column and therefore to the end of the

screen,

that's what I meant with the default will start,

that's why they were at the beginning of it initially.

Now you can also set this to center and now unsurprisingly, they are in the middle of the screen.

Now sometimes, you always want to have some space between these items and therefore, you have SpaceAround

and SpaceBetween and SpaceEvenly. With SpaceBetween, the first card is right at the top and the second

card is at the bottom, so the empty space in a column which is always there, because a column by default

takes all the height it can get,

it has double infinity as a height value

so to say, because that column takes all the height it can get and therefore the full device height

minus the app bar, because of that

now the whitespace with this setting is between the items. With SpaceAround, it's a bit different, there

the empty space is around the items,

so we have the equal amount of empty space in front and after each item.

These are very helpful settings which you can use on both columns and rows to position items along the

main axis,

which just because it's important is top to bottom

on a column and left to right in a row. Now besides the main axis, you also have the cross axis where you

can position items. Now to see an effect of that,

let's first of all go to the second card and give that a color of let's say colors.red so that

we can see that second item just as well as the first one.

Now here for cross axis alignment, you use cross axis alignment which also is an enum

and here you've got a couple of different values.

You also have end and start, let's see what these do,

let's set it to start

and now you see, the one here which takes the full width will never change because the cross axis for

a column is left to right

and since this takes the full width left to right, we can't position it but the smaller card can be positioned

and with a cross axis alignment of start, is all the way on the left because the cross axis starts on

the left by default.

Of course unsurprisingly if we set this to end, we therefore push the item all the way to the end of

our column, all the way to the right here because cross axis is left to right. Now other values we have

here for example are center which is the default, where this is in the middle horizontally and as you

see, also for example stretch. If you use stretch, now this red card also takes the full available

width and here again we have that scenario where card normally would take the width of its child but

now the parent of the card, which of course is our column here for the second card, the parent sets a

clearly defined width, in this case it sets a width of take all the width you can get and now the

card follows that parent width. Again, something where you can always experiment with to get a feeling

for how that behaves. And main axis and cross axis alignment on columns are super important, the same for

rows of course because column and rows are so important, crucial core widgets which help you to position

and align the items or the widgets you have on your screen. That's why we had this little excursion here,

this little look at how we can work with column and main axis and cross axis alignment. Of course we

don't really need this alignment and this look we have here, we'll go back to our application now but

it's super important to take that with you that you can align items in a column and also in a row with

the help of main axis alignment and cross axis alignment.