[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]
This is the all time greatest Flutter video! That no good ScrollView, up to his old tricks again :D
Papa: “All right kids. Each of you can be big as tall as I am, 100px. What size do you want?”
Child-in-law: “OOooneEE huuUNNnndreeEED PiixeeEELLSss”