[MUSIC PLAYING]
FILIP HRACEK: You put a ListView in a column like this,
and you get an error, "Viewport was given unbounded height."
Well, the Flutter needs to perform layout quickly.
In other words, it needs to decide
where to put each widget on the screen very efficiently.
This makes your app faster and also more battery efficient.
For that reason, Flutter's layout algorithm
is single pass.
Constraints go down.
Geometry goes up just one time.
There is no back and forth.
It looks kind of like this.
(DAD VOICE) All right, child, this is how big or small
you can get.
(CHILD VOICE) OK, Dad.
I want to be this size.
(DAD VOICE) All right, you'll be here then.
This happens to all widgets.
It starts from the very top, something like My App,
and then it goes down to every leaf node,
and then it goes back up again.
With things like column, things get a little more interesting
because column and widgets like that have several children.
(DAD VOICE) All right, it's time to lay out.
If you could have any size you wanted, what would it be?
(CHILD A VOICE) I want 20 pixels, please.
(CHILD B VOICE) I want 30 pixels.
(DAD VOICE) All right, this is where you all will be.
That works pretty nicely, doesn't it?
But watch what happens when one of the kids is a ListView.
(DAD VOICE) All right, kids, it's that time again.
If you could have any size you wanted, what would it be?
(CHILD VOICE) I want 20 pixels, please.
(DEEP VOICE) I want everything.
(DAD VOICE) All right.
Oh, wait.
Wait, what?
(DEEP VOICE) As much as possible.
(DAD VOICE) But that's infinity.
(CHILD VOICE) Oh. (DAD VOICE) Oh, huh, huh.
And this is exactly what happens when
you have an unbounded height error in your app.
Now, you might be thinking, why is column saying you
can have any size you wanted?
Why doesn't it limit the size of each of the children
to its own size?
Why doesn't it say, you can be as tall as I am.
Well, that would indeed remove the error,
but it wouldn't remove the underlying problem
that the error is trying to tell you about.
Watch this.
(DAD VOICE) All right, kids, each of you
can be at most as tall as I am, 100 pixels.
What size do you want? (DEEP VOICE) 100 pixels.
(CHILD VOICE) Hey.
(DAD VOICE) All right, I guess ListView gets everything.
As a developer, you see no error,
but the final layout is probably not what you wanted.
All the solutions that we can come up with to this problem
mean that you either see the error, which
is what's currently happening, or you
get weird behavior but no error, so you
don't know what's happening, or the column
needs to talk to each child and do a little back and forth,
which means the layout algorithm is much slower.
What does this all mean for you then?
So the good news is that if you have this problem,
you know about it immediately.
You get the unbounded height error
from the Flutter framework.
Now, if you have this error, what should you be doing?
You should be as explicit as possible.
For example, if you want the ListView
to be as big as possible, still giving space
to all the other children of the column,
then just wrap it with Expanded or a Flexible.
If, on the other hand, you want the ListView
to be an exact science, for example, wrap it with SizedBox.
All right, the next time you will
see the dreaded unbounded height error,
now you know why it exists and how to get out of it.
Thanks for watching.
[MUSIC PLAYING]