All language subtitles for 49. Final Polishing!

To round up this application as it currently is before we dive into responsiveness to make it look

good on other device sizes and to make it look good on

iOS, I want to revisit this list of transactions because at the moment, I feel like it looks a bit cutoff,

both on the top and at the bottom.

Now first of all to make sure it looks better on the bottom, here on our transaction list widget, we can

of course do something to change the height of this container.

Keep in mind that this transaction list widget is used in our main.dart file, in our state class there,

here as part of this column where we have the chart and then the transaction list.

Now you learned what you can do to make sure that this takes all the height it can get in this container,

in this column I should say. We can wrap it with flexible and Flexfit.tight or therefore also just

with expanded. We can even wrap expanded here around our transaction list widget as we use it here or

since that's basically the same, inside of the transaction list around that container

because in both cases, it's the direct child of this column then, our widget here is just a wrapper around

these other widgets which are actually printed to the screen,

so therefore it's the direct child

either way. I'll use it here, since we can then immediately see that it belongs to this column here and

therefore, I'll wrap this in and expanded widget here, my transaction list and

if we save that, we now get an error though. We get an error which basically means that it's having problems

expanding here

and why is it having these problems?

It has these problems because in the transaction list, we have our ListView here

and as you learned earlier in this module, the ListView has an infinite height and

that means that if we have various items, various transactions, the ListView is configured or is always

configured to have an infinite height and if we have transactions, we display this ListView of course

and previously we controlled that with height 300 here.

Now that height of this container is overwritten by our expanded widget which wraps our transaction

list and which therefore wraps this container with height 300

and as you also learned earlier in the course, expanded forces the child to take all the available

height it can get,

in this case in a column.

Now if we force a child to take all the height it can get and our child in the end is a ListView which

takes an infinite amount of height,

then we have exactly the problem we have here,

we're telling it take all the height you can get, all the available space and at the same time our child

says okay I take everything, I take an infinite amount of height and these two pieces of information don't

fit together, which is why we can't reuse expanded there.

What could we do though to still make sure that we take the available remaining space here with our list

view?

Well we'll later, in the next section, learn about a way of calculating how much height we have

available and then we can manually calculate pixel values, percentage shares of that total height to use

a fixed height on our container here but actually derive that fixed height dynamically on the available

height which we're now trying with expanded but expanded works a bit differently, it's not setting a

fixed pixel height, it's telling the child please take all the available space. Later when we can

calculate a fixed height but change that fixed height depending on the viewport height, then we'll have

a tool to make sure that we can actually take up the available space and at the same time, not run into

this issue. For the moment, we can't do this and therefore, we'll have to set a fixed height and so

to simply have a bit of a better looking app right now, I'll set a fixed height of 400 here, which means

that here now this is getting cut off a bit further down and we can kind of maybe use 450 and of course

this now only looks good on this device.

That's the problem here

and if we had a bigger or smaller device, it would not look good but that's exactly what we'll tackle

in the next course section where we will actually not hardcode this to find a value that works for this

device but where we can exactly calculate this for all kinds of device screens. Still, for this device, this

now looks better and I hope it's clear or I could convey what the issue here is with expanded and the

ListView. With that, I think the app is looking good, we can certainly work with that,

let's add one other transaction to see whether everything is working correctly with our changed list

height here. If I do this,

yes we can scroll here,

we can scroll the overall page of course, that only scrolls the size of the chart in this bottom container

however and in that container,

we then have an extra scroller with our list.

So that is all looking good, is all working great as it should,

we can delete items that's also working. With that,

that's it for this module and we'll next have a look at how we can adjust this in a more flexible way

to different device sizes and to different platforms.