Flutter Tutorial for Beginners #12 - Columns

Key Takeaways

okay they're my friends so in the last video we saw how to create a wrote output multiple different widgets in that route on the screen in this video I'm going to show you the opposite direction now or the opposite axis which is columns so that's element stuck in one on top of the other instead of in a horizontal row so I'm going to remove all of this row stuff right here and I'm gonna replace that with a column widget instead now inside this column widget it's gonna be exactly the same kind of thing we're going to have a children property and that is going to be a list of widgets like this so inside here all let's now place a few different widgets so we can see those in a column on the screen so all I'm gonna do is make three containers I'm going to keep this simple and each container is going to be colored a little bit differently and sized differently so we can see the difference between them so inside the first container let us now do a padding property and for that we need our edge in sets all the way around and it's going to be 20 pixels in each direction then it will give this a color property we'll use cyan as the first color and then finally we'll do a child which is going to be a text widget and inside here we'll just say you know what something like that okay now it's telling me cyan is not a color oh that's because this needs to be colors not color so that should be fine now if I save this we should see one over there cool so this works now what I'm gonna do is actually just copy and this dude and paste it a couple of times below because we're just gonna have three containers and all I'm gonna do is change the padding value for each one so I'll change this one to 30 and this one to 40 then I'm also going to change the colors for each one so let's see what coming out for this one colors and let's do pink accent for this one and then over here colors and let's just do amber for this one so now that all different colors and all different sizes we need to change the text in each one so that's going to be two and this is going to be three so if I save this now we can see these three containers on top of each other in a column so remember a column goes up and down and a row goes across now before when we started to lay these out we use the main axis alignment property to lay them out in a row and across axis alignment property to lay them out vertically now its opposite for this because the main axis in a column is vertical right that's the main axis now and the cross axis in a column is horizontal so if we want to control the main axis alignment the vertical alignment in the column here we use the main axis alignment property so let's try doing up inside the column because it the minute these are all just bunched up at the top so let me do main axis alignments and we need the main axis alignment object then let's try sensor first of all so this places them in the center of the column cool let's try something else I'm going to try dots end and no surprises this is going to go to the end and let's try something else I'm going to say now space evenly save it and we can see these spaced evenly so it works exactly the same way as a row but just in the opposite direction the opposite axis so we've done this one now let's try the cross axis alignment so let's use that property and get the cross axis alignment object like so and I've said for the first one here dot stretch now what do you think this is going to do well if we save it we can see that now they stretch across now there's still a gap between each one because we've said spaced evenly in the cross alignment but if I was to say something like and then they're going to bunch together at the end and that was quite nice okay so let's explore a different property here we'll say cross axis alignment and then we'll say Center and that is basically the default because they're all in the center of the column this one is in the center this one is in the center and this is the full width of the column if we change this to start then all going to be bunched up the left of the column if we change it to end then they're going to be bunched up to the right of the column so the best way to get familiar with these columns and rows and these different axis alignments is to just play around with them and just try out different layouts with these columns and rows now the cool thing is is that we can add a row inside a column or a column inside a row for example I could come down here inside the widget list and add a row as the first widget and inside this row and do my children property which is going to be a list and inside this I can just do a text which is going to be hello and then I'll do another text widget after that inside this row which is going to be world okay so now we have at the top of the column a row as the first widget then three containers and inside the row we have two widgets text and text so if I save this now we can see that this is the first widget and it's above the rest of them now these have all gone to the end over here because we have a row now which is taking up the full width of the page so now the column is full width and we said over here that we want the main axis alignment to be end and the cross axis alignment to be end so that's why they're over here at the bottom so there we go my friends that is columns and rows in a nutshell again just play around with these work on different layouts and you will get the hang of it in no time and we are going to be using them quite frequently as we go forward so you will get more practice as we continue as well