Original subtitles

To use this space more efficiently, we need to inform these child elements in our chart because this

chart bar is a child element of the row,

how they should spread out. Now in the row of course, we can say

main axis alignment

because in a row the main axis alignment is left to right should be main axis alignment space around maybe.

If we do that,

that looks way better already. I also however want to make sure that my items here, if I add a really

large amount here, don't change their size,

Instead they should stay in their size and should rather shrink the label here and

that can be achieved by going to the chart bar and then by wrapping this column here with another widget.

I'm wrapping this column here because my chart bar is the child of the row here and I could therefore

also wrap the chart bar here if we wanted to,

let's actually do it here.

So whatever you do, you should wrap the widget which in the end is a direct child of the row

and I'll wrap this widget here with a new widget, with the flexible widget. Now flexible takes a fit argument

and there, you pass a Flexfit value to enum where you have two values.

Now let's try loose and now you see already, we have a line break here because with loose, we already restrict

how much space this may take a bit

but it's better with tight. Now we force the child as the text here says to use its available space

and the available space here by default is the same space for every item in our row.

You can change this with the flex attribute here on flexible if you would wrap every child individually,

which is not possible here because here we're generating all the childs,

so every child I generate has the same flexible setting

but if you set flex here to two on one child and one on another child, then the child with two will get

twice as much space in the row as the child with one.

So with flex and the values you assigned there, you can distribute the available space in a row or

column between the children and you do this by assigning a number to the flex value and then these numbers

are added up and each child then receives its share of the total sum based on the value you added.

However the default is that every item has exactly the same space and that's perfect,

that's what I want here. With FlexFit.tight,

we then ensure that the child also can't grow because by default every child has the same space but

child can grow and take some space away from other children if they need to.

With tight, we force a child into its assigned width or into its assigned size and it can't grow

and that's exactly what I want here.

Since it can't grow, now the label wraps here which of course also is ugly

but our chart looks better. Now to avoid

the line wrapping here, we can go into our chart bar and we have to make sure that this text here basically

shrinks if we are running out of space and that can be achieved by wrapping the text with another widget

that's built into Flutter and that's the FittedBox widget. The FittedBox widget forces its child

into the available space

and if that child is a text, it even shrinks the text. So it creates a widget that scales and positions

its child within itself.

So the FittedBox prevents that

this text keeps its original size and adds a line wrap, instead it says no you will not grow in any way,

rather you should instead shrink so that you fit into the box. And therefore now with FittedBox, our label

shrank, which is in my opinion better than having a strange line breaks here.

And with that, I'm very happy with the chart,

the only remaining thing I want to do is I want to add some padding around my bars here so they're not

sitting on the edges of my card and that can be done in the chart widget of course. Here on the row which

is the child of the card, let's surround it with a container to add some padding like this, with

EdgeInsets.all of 10 maybe and now we have some spacing here, which looks way better.

Now a little side note here,

if you find yourself creating a container only to add padding, then there is a replacement,

you can then just use the padding widget and they're basically simpler containers which can only be

used to add padding.

So if you only need that, you can consider using padding widgets instead of a container,

you still of course need to set the padding property to tell the widget how much padding you want to

add.

And with that, this is the final chart,

now I want to fine tune the list items a bit more and once we're done with that, let's have a look

at responsiveness and also how we can use different styles for iOS and Android devices.