Columns & Rows | FlutterFlow University

columns and rows are two of the most fundamental widgets you'll use when building apps and that's because most apps are just widgets either stacked on top of one another columns or next to each other rows so like in the Airbnb app you've got column and row or Amazon column and row you will use columns and rows in every single app you built and on most pages so in this video we're going to do a deep dive into these widgets learn how to use them and how to fix the most common error you're going to encounter when you use these so the first and most important thing to understand about columns and rows is that they have two axes so over here you can see that we've got a main axis and then we've got something called a cross axis so for a column that I've dumped in here our main axis is of course our vertical axis up and down and you can see this right here in our main axis alignment that we'll get to in a second is that these are vertical things going on here and if I were to add in a row for instance you can see that the main axis is now horizontal stuff because of course on a row the axes are switched and we're covering both columns and rows in this lesson because fundamentally they're the same thing just opposite columns vertical and rows horizontal okay so let's delete our row right here and take a look at some of these properties so the first one we've got is our main axis size in this property tells your column whether it should try to fill all of its space on its main axis so here vertical and that's what we've got selected right here use the maximum amount of space you have or minimum and this will be easier to see if we've got a widget in here so let's just add in a container here give it a different color so we can see it and then if we click on our column again we can see how this works so right now we have maximum so our column is going all the way to the bottom of our screen and if we click it here it shrinks down to whatever size the child is on that main axis now when I dropped in that container something else happened when we dropped in our container that is that the column shrunk in its width from being full width width of this device here down to the width of our container so if we delete our container we can see we've got a full width column and if we paste back in our container it shrinks down to our container now that's not actually what's happening what's actually happening is our column is growing from zero width to a hundred which is what our container is because a column gets its width from its children but if we were to dump a column in just like this and it had no width then you couldn't select it or see it so flutter flow is helping you out here giving you some space to drop stuff in and select things okay so let's put our container back in and look at some more of these properties so that's our main axis size next we have our main axis alignment and this will tell your column where it should place the children inside the column so right now we've got start selected so it places our container at the start of our com and of course you have Center and end and those are obvious for our next one space evenly let's duplicate our container in here with command D and select our column and select space evenly and what this is doing is it's taking the extra space so all of this white space right here and it's Distributing it evenly both between the widgets and at the beginning and the end next we have space around and this is easiest to understand if we add in another container so we're going to duplicate this one more time and if we cycle between these two we can see the slight difference right here and what space around is doing is it's taking all of that extra base and first it's dividing that to put equal space between your widgets and then taking the remaining space and putting it at the beginning and the end and then finally we've got our space between which pushes our first and last widgets to the end and then divides the empty space between the interior widgets Okay so we've set our main axis size or vertical size our main axis alignment so how our children are aligned inside our column and now we have our cross axis alignment so on a column our cross axis is horizontal so this is how our widgets should be arranged horizontally inside our column but we've got a problem because right now the width of our column is determined by its children and all our children are the same width so if we were to do any of these they don't do anything and that might be what you want and so that's fine but in order to demonstrate this let's make our column bigger let's make it fill the the full horizontal space so how do we do that well first we could put another widget inside here that fills the full width because if our column wants to be the size of its children and we make a children full width then it'll make it full width so we could take any one of these children and just give it an Infinity width so now our column fills the whole screen space so that's one way make a child bigger the other way would be to have a parent pass down a constraint that's larger so for instance we could take this column right here and wrap it command b in a container and remove the height and remove the width and give it a double infinity width and so now if we select our column we can see that it's filling the screen now there's one more way that you can do this but it'll change the size of the children and that's to use this cross axis alignment stretch property and if I click this it'll stretch the children to fill all of the available space okay but let's set it back to how we were before and now that we've got a column that's full height and full width we can see that our other cross axis alignment properties do what we would expect them to do okay great we're almost done with our column we've got one more property and that's our scrollable property by default it's turned off but if we turn it on we're going to see that two things happen first it will shrink wrap the children well why does it do that this is because our column has alignment options and with those options you're telling your column what to do with its extra space but if you're allowing scrolling that extra space has changed from just being the extra space on the screen to being potentially infinite because now you can scroll and if flutter allowed it it would have that main error that we're going to talk about at the end of the video an unbounded height error where One widget is looking to another widget for how big it should be and that other widget is a saying give me the infinite amount so it shrink wraps your widgets the second thing that it does is it allows you to scroll now it's not allowing us to scroll here because scrolling only occurs when you have some sort of height constraint and that height constraint could come from the screen size itself or it could come from a parent widget so for instance if we select our container up here and we give it a height of 200 pixels then this will scroll and it might be hard to see here so let's change the color of this and now we can see that we've got a scrollable column the other way that you could do this let's take this off of our height is we can make these containers bigger so that they're going to overflow our device here and once that happens then we can scroll okay so that's columns but what about rows well remember they're basically the same thing just opposite so we can fly through this very fast because we already understand everything so I'm going to just command Z till my containers are back to their 100 by 100 and then I'm just going to replace this widget with a row and let's replace this container right here to demonstrate some of the properties so first we've got our main axis size it's set to Max which is filling up the whole horizontal space and now I set it to Min it's going to shrink down to its children which is right here let's make that big again and of course these work like expected and of course our cross axis doesn't work because the same issue as before our height is shrunk down to its children and I could stretch them or do the same things as before so let's just wrap it in a container and give it a height of say 500 pixels and spread out and now we're centered in the middle and we can do all of our cross axis alignment stuff okay so the last thing we want to look at is the main error that's going to happen to you and it will happen to you but after this video you're going to understand it and be able to fix it easily so let's just delete everything we've got right now so let me show you how this error pops up so I'm going to come over here and I'm going to add in a column and I'm going to add in a list view here and right now it's shrink wrapping so shrinking things down to its children doesn't have any so it's zero but if I turn this off I'm going to get this error right here I'm saying the most recent action would have caused the crashing error so we've undone it for you and the reason is that this list view would have undefined or infinite height but its parent gives it an unlimited amount of vertical space to expand which would cause an error we've undone it for you okay so sometimes when this error happens you'll see this little pop-up sometimes it won't and let me show you that we're going to add in a column here and add in in a container in that column let's give it a little color here and we'll replicate this error by coming over to our height right here and clicking Infinity now if this happens to you you can simply refresh and why did that happen the fundamental problem here is flutter's inability to know the height but what do I mean by that well we've got a column here and the nature of a column is that it Stacks stuff on top of each other inside that is it's made to accept a lot of things inside it and so it determines its height by looking to its children and everything is fine if you have a couple of children saying I'm 100 pixels or I'm 200 pixels but if the child says give me an infinite amount of height the column doesn't know what to do so it crashes so how do you fix this well the big principle is to be more explicit that is if the problem is not knowing the height we need to be more explicit to our column about how big it should be and there's a couple ways to do it so in this design right here it aired out because our container wanted infinite height so anytime it has an explicit height like right now with 100 it's fine so if I gave it 500 pixels it's going to be fine or if I gave it more than the height it's still fine so if I gave a 2 000 pixels it's fine but what if you wanted it to be the full height of the screen not anymore not any less well that's where these expansion properties come in and just use the expanded widget and we'll have another video on the difference between flexible and expanded but the job of expanded is to fill the rest of the space in a column or row and that's being more specific to our column because instead of saying give me Infinite Space these are saying just give me whatever space you've got left okay so that's one way you could also be more explicit by giving it a percentage here so I'm going to give it a height of a hundred percent and that's fine because we're being more explicit hey this is John from slightly in the future so as I was finishing up this last video our amazing devs dropped another property in the column so let me show this to you so we've got a column right here and at the bottom right here we now have this item spacing property and what this does is it adds gaps it adds spaces between the children in your column so down here if I want 12 pixels of spacing boom there we've got it and it propagates between every child this is awesome because before if you wanted spacing you would have to go into each item and add padding to it and this way this reduces the amount of repetitive work you have to do because you can just set it once and be done with it so that adds the space in between each of the children items here but if you wanted to also add to the beginning and the end of your column you have this toggle button right here apply to start and end so apply this spacing to the start and the end of your column so when you turn that on Boom now we've got nice spacing at the top and the bottom and we haven't had to mess with padding at all the last aspect of this item spacing is this set from variable icon so this means you can have Dynamic spacing so maybe you want to alternate spacing between having big and small gaps maybe you want to have a big gap after your first item because you want to highlight it those are the types of things you can do with setting this item spacing from a variable and that's columns in rows in flutter flow

Channel: FlutterFlow

Views: 26,029

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 column, flutter row

Id: EwAh6j_Y7KE

Length: 13min 25sec (805 seconds)

Published: Tue Jun 20 2023