Unbounded height / width | Decoding Flutter

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

This is the all time greatest Flutter video! That no good ScrollView, up to his old tricks again :D

👍︎︎ 4 👤︎︎ u/esDotDev 📅︎︎ Jun 30 2021 🗫︎ replies

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”

👍︎︎ 2 👤︎︎ u/ariky 📅︎︎ Jul 01 2021 🗫︎ replies
Captions
[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]
Info
Channel: Flutter
Views: 43,717
Rating: 4.9855404 out of 5
Keywords: GDS: Yes, unbounded height error, unbounded width error, flutter unbounded error, listview, new developer show, developer shows, developer tutorials, Flutter, Flutter tutorials, Flutter developers, flutter app development, Flutter course, how Flutter works, Flutter best practices, Decoding Flutter, Google developers, flutter 101, get started with flutter, flutter apps, flutter widgets, build apps with flutter
Id: jckqXR5CrPI
Channel Id: undefined
Length: 4min 54sec (294 seconds)
Published: Tue Jun 29 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.