#1 Rule of FlutterFlow Layouts | FlutterFlow University

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 like 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 Spacey guys 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 alright 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 I ah 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 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 parents 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 and 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 all 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 weight 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

Channel: FlutterFlow

Views: 15,727

Keywords: FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, No Code App, FlutterFlow App Builder, No Code App Builder, FlutterFlow University, flutterflow tutorial, flutter layouts, constraints go down, sizes go up, parent sets the position

Id: glit6YCj0B0

Length: 10min 58sec (658 seconds)

Published: Thu Jun 22 2023