All language subtitles for 23. Making the List Scrollable!

So what's causing this issue here which we also kind of saw when we added that keyboard?

There we also have the strange warning.

The problem is that this content is not scrollable.

Let's understand how a column and by the way, also a row works by default.

A column takes the full available height, a row the full available width

but with that, of course I mean the height on the screen, not an infinite amount of height,

it doesn't automatically add a scrolling functionality.

That means that a column tries to squeeze all children it has into itself

but if the child widgets have their own heights, like this one has, we define the height of a single

transaction by the height of this box, by our font size and so on. So if these have a height

which the column can't shrink, then at some point of time, the child widgets won't fit into the column anymore

and then we need a solution and the solution is to add scrolling to the column and you can also add

scrolling to a row. The fix is to go to our main.dart file and wrap the overall column that holds all

our content on the page in a new widget.

Now here is no predefined snippet for that but we can wrap it with a new widget and the widget we want

to use here is a single child scroll view.

Now this add some scrolling functionality to this column, which otherwise can't be scrolled and therefore

now, you already see that we get no error here anymore when I open the keyboard, which is good.

Now if I add a couple of transactions here real quick, so that we have too many transactions to squeeze

them all into one column,

then you see I can now scroll because single child scroll view adds scrolling functionality.

Here's one important note, you have to add the single child scroll view on this level here so as the

body element itself, it wouldn't work

if you add single child scroll view only around user transactions or only inside of the transaction list

here

let's say, around this column. This would not work like this because a single child scroll view then wouldn't

be able to set up scrolling correctly,

it basically wouldn't be able to identify the container height in which it should scroll.

What you can do however is you can not use single child scroll view here in the main.dart file,

so remove that and remove that extra parentheses and instead in transaction list, you can wrap it with

a container which you give a clearly defined height

and important here is that you choose a height that does fit on the screen, like maybe 300,

let's see,

yes

I'm not getting any warnings here,

for example if I chose 500 here, I would get an error here

and of course the available height depends on the device size. We'll later also have a look at how you

can find out how much space is available

but here on my emulator, just because I want to show this, if I work with 300 here, now we have a clearly

defined container into which this column may go,

so now that column does not size itself after the amount of space it needs for its children, instead

it knows how much space it can take, 300 pixels

and now you can wrap the column here with a single

child scroll view and that single child scroll

view now also knows

that it must scroll inside of this 300 pixels box.

So now here, we still get that warning however because I remove the overall scroll view on the entire

page, which means that when the soft keyboard enters the page, the page doesn't know where to go

but now we can scroll into that sublist down there.

Now this can also be a useful pattern but in our app here, we definitely also need the scrolling on the

entire list because we otherwise get that problem here where our soft keyboard actually pushes the

page up a bit and that then leads to exceeded page boundaries. By the way, in detail what's happening

here is that Flutter tries to always scroll the input, which we're editing into view and therefore it

insets the page by the height of that text field, so that that text input can never be below that soft

keyboard.

It's not the case here but it could be below the soft keyboard on smaller devices,

that's why the height of that text field is always added as a padding above the soft keyboard

and that's exactly the problem we have here,

that height is added here but since the page can't scroll away, we try to add height on a page that's already

fully occupied with content.

So that's the problem we have here

and to avoid that, we definitely have to wrap our overall column here with a single scroll view, so

there is no way around that.

So here we have the single child

scroll view around our overall column and now the entire page is scrollable, which leads to no visual

difference when that keyboard opens up

but technically there is a difference and we can see that by the way if we rotate the device.

Now if I tap in here, you see that this gets scrolled up a bit by Flutter

to make room for the keyboard and that is exactly what happens when we have a scroll view and

what's not possible if we don't have one.

It's a convenience feature by Flutter so that we can always reach our text input and see what we're

entering but it only works if the page is scrollable for pages that are packed with content or on smaller

devices.

Well our list of transactions here also is scrollable because here, we still have our separate container

with a single child scroll view

which of course is something you could now also delete again but you can also leave it here.