Flutter Tutorial for Beginners #11 - Rows

Key Takeaways

okay then gang so far we've only been adding one widget at a time to the body of our app whether that be a text widget or an image or a button our container or something else and that is a pretty boring so what I'd like to do is now expand our layout so that we can have multiple different widgets on the page at once da da and to do that we're going to be using a combination of row and column widgets now if you've ever used CSS grids or flexbox before this kind of layout might be second nature to you and you're gonna pick it up pretty quickly it's one of the ways in which flutter has kind of borrowed from the web but if not don't worry it's not too hard to grasp after a little bit of practice so anyway a row in itself is a widget and that widget can then contain several different widgets inside it which makes sense because we can have multiple widgets in a row on a screen can't we so let's try adding this row I'm going to get rid of that padding I don't want that anymore and instead I want to replace this with a row widget now since we can have more than one child inside a row we don't have a child property anymore instead we have a children property so we can see the suggestion or right there so I'm gonna press tab to accept that suggestion and we can see that this is now a list and the type of things in that list should be widgets so we're saying now the children property should be a list of widgets and those widgets inside that list other things that will be inside this row that makes sense so if we open this up now I can add different widgets inside this row what I'm gonna do is a text widget first of all that just says like hello world standard and then after that I'm gonna do a flat button and inside the button will do an unprecedent shout at me and we don't have to put anything inside this function for now we'll also do a color and this is going to be colors dots amber will say a nice yellow color and then also we'll do a child property so that we can have a text widget inside that button but this is how we add text inside a button it needs a child property and then a text widget so the text will just say you know click me okay so we've got two widgets now inside this row let's just do a third for good measure by the way notice and commerce separating these widgets inside this list when we looked at lists at the start of the whole series that's what I said you can comma separate different values inside a list it's just like an array in JavaScript anyway I digress the third element or the third widget is going to be a container so inside this container will do a color property first of all to colorize this so I'll say colors and then dots cyan let's go for something different and then we'll also do a padding property just to give this a bit of breathing space inside and this padding property is going to be the edge in sets and we'll choose all so all the way around it's going to have the same value which will be 30 pixels now we want something to show inside this container so I'll do a child property which is also going to be text and then I'll just say inside container in case you didn't already know who okay so now we have these three widgets bunched up together inside this single row and they're all inside this widget list right here so if I save this now then we're gonna see all of these widgets in a single row like this awesome now we have more than one widget on the page at a time so that is progress and they're all inside one row so that's good that's a good first step but notice this they all bunched up on the left side pressed against each other now that's fine maybe that's how you want them to look but you might want to spread these out differently inside the rope so to do that what we could do is use a property on the row and make sure it's on the row itself not inside the children or any other widget inside that on the rule itself we can use a property called main axis alignment so if I use that I can control how these widgets are aligned on the main axis now to explain all this axis thing I prepared a cool little picture which I'm going to show you so imagine we have our row going across like this with three different widgets our main axis is the direction of the row and the cross axis is the perpendicular direction so we have a main axis going across and across axis going downwards so we can control the layout on the main axis and also the cross axis so we're going to do the main one first of all and this is the property we use to control the layout now we have different options here and all those options are on the main axis alignment object so we can see we can use the sensor property space even less space around and space between and start now start is the default one where they're all bunched up to the start next to each other but we could use for example the sensor property now if I say this they're all going to be in the center of the world so that's nicely if you want to centrally align them in the middle we could also use a different property so I'll say dots space between and if I save this you can see now we have space between them but no space on the end of the row on the left or the right but that's good let's try something else I can use start that was the default one a space evenly is still going to space these out a little bit but now we get a bit of space on the left and a right as well and you can see the space between each element or each widget and the sides is the same it's evenly spaced let's do another one so dots end you can probably guess what this is going to do it's going to bunch them up to the right to the end of the row like this so the opposite of start and final it let's look at the other one we've got space around if I save this then we can see we have space around the elements as well and it's a bit like space evenly but notice this time the space here between the widgets is double the space between the widgets and the sides so they're the different things we can use all the different properties we can use on the main axis alignment to align these difference widgets so what I'm going to do is stick where this space evenly for now and save that so it looks something like this and we can also control how they're displayed on the cross axis as well this direction so at the minute they're all kind of in the center this is in the center of the row vertically if you like it's not at the top it's not at the bottom it's in the center but we can control this differently and the way we do that is by using the cross axis alignment property again we use the cross axis alignment object right here we have different properties we have stretch so if I did that and saved then notice they stretch the whole height of the available space we don't want that so let me take that off and choose something different I'm going to choose Center see what that does okay well that was the default value because that's how it looked before well let's choose something else will go with start and if I save this notice now that at the start of the cross axis so at the top if you like and if we do end then you'll probably guess it they're going to be at the end now it's not going to be down here and I'll show you that it's going to be at the bottom of the highest widget so this is the highest widget and this is now going to the bottom of the row which now takes up that height okay and I think what I'll do is I'll just put this to be start for now and save that so they all go to the start so there we go my friends that is rose and how we can add multiple different widgets inside the row so we can see all of those on the screen the next part of the layout puzzle is going to be columns and we're going to look at that in the next video