All language subtitles for 41. Flexible & Expanded Deep Dive

In the last lecture, we played around with our chart and we had the strange behavior that one column

was getting bigger than the others because it had longer text in there and that distorted our chart

and we could fix this with the flexible widget

but of course it's important to understand why we were able to fix it with that

and for that, I prepared a very basic playground here.

It's a simple app and you of course find the code for that attached, it's a normal app

as we created with Flutter create and I only change the main.dart file to container row here

as the body, I'm spacing my items with space around, so I'm aligning them on the main axis with space

around

and then I have three containers in there,

each container has a height but no width and a different color on each container and then we have some text

in there and

the first container has a bigger text which is why that box is bigger than the other boxes.

This is a comparable setup to what we had on the chart right,

we have three different elements in this case here and one of them is getting bigger than the others.

Now first of all, it's important to realize that inside of a column or a row, every item is just as big

as it needs to be

or as you tell it to be, for example on a container we could also set a width of 300

and now we would have a way bigger container over there

that even leads to that row not being wide enough to fit everything in there.

So that's the first important takeaway.

If you don't assign any widths and so on, then the items are as big as they need to be.

Now sometimes however, you want to tell an item to take up more space in that row or column than it would

normally take

and you can do that by wrapping it with a widget. Let's say we will wrap the second item,

the second container here with a new widget and that is the flexible widget which we used in the last

lecture.

Now there, you learned that you can set a fit property and

now what does fit do or the fit argument do? Fit takes a Flexfit configuration

and that's an enum with basically two values, loose and tight.

The default is loose, so setting loose makes no difference here,

what does loose mean?

It means that the child of that flexible item basically should keep its size and use that size in the

surrounding row or column.

So as I said, it's the default and you rarely need to set loose explicitly,

you would typically only set this if you kind of derive the value here dynamically and you also

sometimes switch it to its alternative which would be tight.

Now what does tight do? If I wrap my item to here with flexible fit set to Flexfit.tight,

then you see all of a sudden this blue container takes up all the remaining space here in our row.

Please note that it only takes as much space as fits in there without squeezing any items off the screen

which is why we're not getting this yellow black warning marker here.

So now blue essentially knows okay, I should take all the space I can get

and indeed, if you have a look at the description of tight, then this is forced to fill the available

space. Loose doesn't force the child to fill the available space and therefore, it will fill the space

it needs to fit its content in and which in this case is only this text here

or if we had set a width on the container, it would be the width we set here

but now even when we set a width of let's say 100 here, with Flexfit.tight,

this is basically ignored and it is forced to take all the available remaining space here.

Now you can also do other cool things.

Let's say we also have the third container wrapped with that. So I wrapped this with a widget too, give it

a flexible widget around it and set fit to Flexfit.tight, so to the exact same configuration as

my item too.

Now you see, these two items here split the available space

and now if I remove that extra text on the red element, on the first element, you see that this now gets

squeezed to only have the bare minimum of space it needs to fit its text in there, which would be the

default space it takes because we have no flexible widget around the first container with Flexfit.tight,

we have no such set up there and therefore, this only takes the space it needs. The other two widgets,

the other two containers however are configured to fill the available remaining space and that means

right now since there are two containers which each want to take the available remaining space, they

split the remaining space amongst them.

Now sometimes, you want to have that behavior of taking the available space but you also know yes,

both should take the available space but the blue container should get twice as much of that available

space as the orange one

and for that you can add another argument here on the blue container then and that's the flex argument

which I only explained in theory in the last lecture. Flex by default is set to one on every element,

so setting this to one won't make a difference.

However, watch what happens if I set flex to two here. If I do set this to two,

now you see the blue container grew

and now if that here, the blue and orange area together is our remaining free space after deducting the

red container from the full row, then you see that blue is now twice as big as orange because we gave

it a flex value of two.

Now important, two does not mean twice as big as the rest,

instead this works a bit like flexbox for the web

if you know that from CSS, if not that's no problem.

Flutter goes ahead and basically adds the flex values of all items in the row,

which means the first item here has no flex value because it's not wrapped and flexible

but then we have a flex value of one here which is the default for our third container,

so we have flex two plus flex one which means we have a total sum of three.

Then Flutter knows that since this here has a flexible value of two, it wants to take two of three available

segments

and this one has the default value of one, it takes one of the three available segments.

So this takes one-third of the available size,

this takes two-thirds.

If we for example added Flex 2 on the last container as well, they would split the size equally again.

Why?

Because we have a total flex value of four, two plus two and Flutter now finds out that the middle container

wants to take two segments of these four available segments to split the available space

and the last container wants to take the other two available segments, so therefore now, they're evenly split.

So these flex values have to be seen in relation to each other,

if we have 5 and 2 here, this means this is 5 to 2 in terms of how much space it takes.

We have a total of seven segments into which the available remaining space is split up and this container

here takes five of these seven segments, this one two of these segments,

so this is two and a half times as big as the last container.

This is how you can play around with that and that's of course super useful for sizing your elements

in a row or column.

Now back to the fit here now,

if I change the item three to a Flexfit of loose, you now see the container itself now only takes as much

space as it needs for its child

and yet we see that there now is some empty space, some whitespace. The reason for that is that the

flex values here are actually still taken into account.

If I set the last item here back to flex 1, you'll see now there is less available free space and

the reason for that is that we still have Flexfit.tight on the blue container, which means take all

the space you can get but we at the same time tell it but you only get five-sixths because 5 plus 1, five-sixths of the

available space.

So even if the last item doesn't fully occupy the remaining available space, so the one-sixth that it could

take, even if that's not the case, this middle container is still configured to only get five-sixths of the

available space and that means that one-sixth, which the last item could take if it would be set to tight,

that is simply left open which is why we have whitespace all over our row because that whitespace together

would add up to the size the last box could take if it would be set to Flexfit.tight which it isn't,

therefore it only takes the space it needs for its content and the space it could take is left empty

and because we have our alignment set to space around, that empty available space which is not taken

is split across the entire row and not just somewhere here at the end.

So I hope this makes a bit of sense. As always, playing around with that,

building a demo app like this and simply trying out different configurations is the best way to dive

into this and to really master it and get a feeling for this. That's way better than learning all these

different rules and combinations by heart, you won't be able to remember all of that and also there is

no value in doing so,

instead build a simple application like this and play around with these settings to get a feeling for

how Flexfit.tight and Flexfit.loose and the different flex values work together.

One last word, if you have flexible with fit set to Flexfit.tight,

there also is another widget which you could use which is a replacement for it,

there is the expanded widget in Flutter.

Expanded is simply flexible with Flexfit.tight and therefore, expanded has no fit argument,

you can't set it here,

instead expanded only knows the flex configuration here which we used on flexible. So expanded is a perfect

replacement for flexible with fit set to Flexfit.tight and therefore if I save this, you see no difference

on the screen because it is the exact same.

So if you need Flexfit.tight, instead of using flexible with that configuration, you could simply use

expanded instead

and that's it for now with rows and columns and flex and flexible and how to size the items in there.

Again,

definitely fire up your own demo app and play around with these values to get a better feeling for how

this all behaves and how you can distribute available space in your rows and columns.