In this video, we're going to talk about the most important layout principle for both understanding and troubleshooting your layouts. So here it is: memorize this. Constraints go down, sizes go up, and the parent sets the position. That's it. If you memorize and understand this, you'll be able to master layouts in Flutter Flow. So let's take these one at a time. First principle number one: constraints go down. So what do we mean by go down and go up? Well, that just means going down into the widget tree from parent to child. So here we've got our root widget, then a column, then a container. That's going down, going into your widget tree. So whatever constraint means—and we'll look at that in a second—that gets passed down from parent to child to child. All right, so what's a constraint? Well, a constraint is just a minimum and maximum width and height, right? So four values: a min and max width, and a min and max height. So when we say constraints go down, we mean a parent like a column gives a minimum and maximum height and

width to its child, so a container here. So the most simple example would be that if you had a container here that's 100 by 100 pixels, that would be passing down a minimum width of zero and a maximum width of a hundred, and a minimum height of zero and a maximum height of 100 to its child. So whatever goes into this container, those are the constraints. That's how big and small its child can be. So if we were to put, say, a text widget inside here, and there you can see it right there, and we added another hello world in there, it's going to wrap it on the next line because this text widget is receiving a strength of a hundred pixels from its parent. The container is saying, Hey, text widget, you can only be a hundred pixels wide. But normally, you're not designing with just static values because you want things to fill the screen, and of course, there are different screen sizes. So what if you have a column or a row, like something that scrolls? Well, then we get another value that your constraint can

have and that would be unbounded. That is, it's giving as much space as the child, as the children want. So, the constraint can also be unbounded, but the truth is you don't really need to know the exact value of the constraints because you can just see it. For instance, in this example too, the horizontal, the width constraint of this is like whatever this is. I don't really need to know what it is. I can see that it's just this. What matters is not what the constraint is, but where it comes from. So, in here, if you just click on anything and then you just kind of move up through the widget tree, you ultimately get to this, which I've helpfully named Max with. But then you can see, oh, we've got this width value here, and that's where this constraint is coming from. So, if I want to change it, I would change it here. And remember, constraints go down, and that going down could be from one parent or a great-grandparent or a bunch of grades. So, if you want to change that constraint, you

just want to know where it comes from, so that's constraints going down. Second principle, number two, sizes go up. This means that a child will tell a parent how big it wants to be, and this does happen in that order. First, the parent will say how big you can be, that is passing down the constraint, and then it says, So how big do you want to be, child? and the child will say something like, I don't know, 200 pixels, or Give me all the space you got. That's sizes go up. And finally, principle three, the parent sets the position in the final step of the layout. After the constraints and sizes have been figured out, we need to determine where to place the children inside the parent, and the parent sets the position of the children. The most obvious example is with a column or a row. So here we've got a column, and we've got all of these main axis alignments. That is, this is an example of the parent setting the position of the child. So now it's set to

start and you could say position the children in the center or the end. All right, so constraints go down, sizes go up, and the parent sets the position. Lastly, let's look at how this helps us to troubleshoot layouts because you will encounter layouts that seem to be not working correctly or just seem weird. And if you apply these layout principles, walking through each one of these three, you'll be able to figure out what's going on. So let's look at some of these weird layouts. All right, so here's our first one here, and we've just got a column and a container. But if we look at our container here, we can see that it's got a width of 100 and a height of 100. Now that height is right, that's a hundred pixels, but the width is not 100 pixels. If it were, it'd be like over here, but it's taking up the full width. Okay, so let's work through our principles. The first one, can the strengths go down? And remember, this is a set of Min and Max.

height and width. So if it goes down, let's look at our parent. So we come into our column and we're looking for the width. That's the weird aspect of this layout. So that wouldn't be the main axis because that would be this vertical direction. We're looking at the cross axis and as we can see, we've got a stretch property. And as it says right here, make children fill the cross axis. Aha! So now we can see what's going on. The constraint that our column is passing down is a minimum width of the rest of the space. Okay, cool. That makes sense. Now here's a next example. All right, so in this one we've got a row and a container. And this row has a main axis alignment of center, but our container is on the left here. Okay, so let's take a look at our container right here. And we come over here and we see we've got a width of 100. That makes sense. But when we look up here, we've got some padding applied of 300 pixels. Ah, okay. So this has to do

with our second principle, sizes go up. So our row was saying, Hey, I want you to be in the center, but the child has a size of 100 for the container, but 300 pixels of padding on the right. So in reality, this container is taking up the whole space. That is, the size of this container is this full width with the container all the way on the left side here, and that's getting passed up to the parent. So in reality, this is centered, but when you center something that's full width, it's no different from centering it on the left or the right. Okay, that makes sense. Let's look at one more example. All right, so once again, we got a column and a container, and you can see this is just 100 by 100, but we have some alignment applied to it, and it's center top. But of course, our container isn't center top, it's center center. It's really like this. So why isn't this working? Well, this has to do with our third principle: the parent sets the position. Because if we

go into our column right here. You can see that we've got a main axis alignment of Center. So our parent's column is setting the position of the child. Okay, awesome. But this kind of raises one other thing. What happens when there's a contradiction between two of these principles? So a child wants to do one thing that contradicts its parent. Like what happens then? Well, one of two things will happen. Either an error or an override. An error could come in the form of a crash, a pop-up message, or an overflow error. And an override just means that the thing that is overwritten just won't work. There's a precedence and there's an order, and the one that has precedence wins. So let me show you these. So here I've got a column and a container, and in our column, let's set it to scrollable. So the constraint, so the vertical constraint that it's passing down, is unbounded. It's telling its children, Hey, I'm gonna be as tall as however big you are. And then if we go

into our container and tell our height and tell our parent. Okay, then give me an infinite amount. We get a nice pop-up that's telling us that this would have crashed, so Flutterflow undoes it for us. That is, there's a contradiction between these two layout principles. That is, you have two widgets, one a parent and one a child that's looking to the other for their height, and so it can't resolve. And if you want to know how you would fix this problem, you can watch our video on flexible and expanded. So here's a pop-up right here. You also might get an overflow error. So let me show you this. I'm going to replace this widget with a row, and let's make this container bigger than the screen right here. And we can just come over here to see the overflow, and we get this error right here. So you might get this. The constraint that the row is passing down, and it's getting this from the root widget, it's saying, Hey, the max width is the screen size. Well, then the child says, Hey, I want

to pass up my size of 422 pixels, which is bigger than our screen size right here, so we get this error. All right, last one is overrides, so let me show you this right here. And this is an example we saw before, where we have a width of a hundred, but we have our parent saying, Hey, stretch the children all the way. So we have a size going up, our second principle of a hundred pixels, but that's overridden by the constraint that's passed down from our parent, which is that the minimum width should fill up this cross axis. So sometimes you won't get an error, it will just overwrite. All right, so that's it. Constraints go down, sizes go up, and the parent sets the position. Memorize that, and you will be a master of layouts in Flutter Flow.

#1 Rule of FlutterFlow Layouts | FlutterFlow University

Design, develop and launch native mobile and web apps — coding optional
The best part? Download the entire project with 1 click.

Get Started → https://flutterflow.io/


#1 Rule of FlutterFlow Layouts | FlutterFlow University

#1 Rule of FlutterFlow Layouts | FlutterFlow University

Scripts