Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Padding

welcome to this new video on coding with flutter today we are going to talk about layouts in flutter specifically we are going to do a walkthrough on the most common widgets that can be used to build layouts in your apps in this video I won't be doing any light coding instead I'll show you our mobile app that I've built to explain layouts I'll be showing you both the app and the source code for it so if you check the description on this video you can find a link to the download the code the link will take you to this page on github now this is intended as a reference up for doing layouts in flutter so if you want you can download it and install it on your device and you can have it always available ok so now we are ready to take a look at layouts in flutter and you can notice that this app is made of five different tabs that you can select here at the bottom so we are going to talk about each one of these sections of the screens in detail and the first one that we are going to talk about is rows and columns so rows and columns are everywhere in flutter and that's because they are used for one very common task and that is to present multiple widgets vertically or horizontally so here we have three icons two small and one big one and I provided some controls over here that we can use to customize how a row or column renders itself now before I talk about all these different options and what they mean I want to show you how much we render in this row or column in the code and this is actually very simple each layout is actually just ten lines of code both for the row and for the column up here and we can specify our alignment and size properties and define an array of children which will contain our widgets and this is all that there is to it there is no magic here so let's take a look at the first control which lets us choose between a row or a column so if we toggle this we can choose to align our widgets in a column or in a row and let's keep it on row for now then we have three other control and they are called main axis alignment cross axis alignment and main axis size the first one that we need to look at is main axis size and this is what determines how much space our row or column takes within its container main axis size has two possible values either min or max and you can see that if I switch the value of this control the yellow box here grows to fill all the space or if I set it to mean it shrinks to only fit the smallest possible size that still contain the icons so for now let's set this to max and look at the main axis alignment now this has multiple values and let's see what happens when we change it so start and center space between space around and space evenly now note that because we have set the main axis size to max the children of our row can position themselves along the main axis according to the alignment value specified here however if we change the main axis size to minimum we can't control the positioning anymore and this is because the children are restricted within the minimum space that is determined by their own size so let's switch this main exercise back to max and get back to main axis alignment so we can position the children widgets at the start of the row at the end or in the middle if we select Center and then we have three more options space between which uses all the space and leaves equal space between children space around which divides the space between children in equal units and also leaves half a unit to the left and to the right space evenly does the same but leaves one full unit to the left and to the right of the widgets in practice I've noticed that these six combinations are enough to accommodate the requirements for most of my layouts and certainly when I need equal spacing between children we will look at other ways of having non equal spacing later on when we explore extended and padding but for now this is all you can do with main axis alignment next let's look at cross axis alignment cross axis alignment refers to the axis that is orthogonal to the main axis so in the case of a row we look at the vertical axis just like with the main axis alignment cross axis alignment can be set to start and/or center and we can see how the widgets align so we can see that it uses the space within the cross axis which is for a row is the vertical axis and positions the children accordingly but it also provides an extra option called stretch and this is what you can use to extend it to fill the entire space available within its parent so now we have explored or the alignment and size options that we have available when working with rows and when it comes to columns the very same options are available because you can think of a column like a row but with the two axis swapped so if we switch the layout to column let's see what happens so we can restore the alignment to start and the size to minimum and we are back to where we were at the beginning with row and column so all the same considerations amount about main access size applied so when we set this to marks the column will fill all the vertical space available within its container we can change the value of our main axis alignment and we can see that start and center apply just in the same way that they did for a row layout and also the space between space around and space evenly options apply as well finally we can change the cross axis alignments values to start and center or stretch so in summary this is all that there is to know when dealing with the alignment and size options available on rows and columns and once again this has been a very long overview so that I could explain everything in detail but when it comes to implementing this it really is just ten lines of code so this is how you use rows and columns in fatter and how you can set their own alignment properties the next thing I want to talk about is baseline and the reason for this is that this is a special cross axis alignment option that is useful when rendering text so in particular if we have multiple text widgets in a row and there are all different sizes it gives you a way of aligning them according to their common baseline so this is what baseline is for so if I change the cross axis alignment option here you can see how it works with text when I set it to start and/or center processing Kroc's axis alignment behaves exactly in the same way as we have seen in our row and column example but for text it's really useful to also have a baseline option so that it aligns correctly okay now that we have covered rows and columns and how they can be used to render widgets or text we can move on to the next layout element which is called a stack now how is a stack different to a row or a column so whereas with rows and columns we can align widgets alongside each other in the x and y directions you can think of a stock as a way of aligning widgets in the z direction and that is to say the widgets can be stacked on top of each other so stock can be configured in a few different ways and here we are going to look at a couple of different ones that are quite common one way to work with stocks is to use alignment but before I show you how alignment works let's look at some code okay so here we have a method that builds my stack and I can provide an alignment property then the stock takes an array of children and in this case I've set it to three square boxes of size 300 200 and 100 and to do this I use a sized box widget inside each box a place a container and I set their color to green yellow and red so this is a fairly simple layout now let's get back to our app and see how it works so the alignment has nine possible values so let's take a look at them up start top center top end center start center center and bottom start bottom center and bottom end so this is really just a three by three matrix of possible values one thing that I would like to point out is that the green box always appears to be stucked at the bottom the yellow one is always in the middle and the red one is always at the top and this reflects the order in which have declared these three boxes in the code so do keep this in mind when writing your stocks you can think of yourself as a painter and as you read this code you would paint the Green Square first and then you would paint the yellow square and then you will paint the red one on top so let's see what would happen if we took the red square and painted it first so we can see that this no disappears from from our app over here and the reason is that we would have painted the Red Square first but then the green one on top would have covered it so let's put this back to how it was before and we are ready to move on now let's look at a new type of widget called positioned now how does this work so let's look at the code so down here I have a square sized box of size 300 and then I have four positioned widgets one two three four now positioned widgets are another way of defining widgets inside the stack but in this case they specified their distance from the edges of the stack so when defining a positioned widget you have to specify exactly four out of six possible values so in the first example here we have left top width and height to draw a square of color indigo and in this example over here we have right top width and height to draw a square of color red and so on for the other two Square so when using position widgets within a stack the alignment property is actually irrelevant as we specify the positioning directly within the positioned widgets the other thing to note is that the size box here is the widget that has the biggest size in the stack and so it defines the stat the size of the stack object itself and so finally you can see that the four position widgets that I am putting here they are not aligned horizontally or vertically and so this is not a layout that you would be able to simply do with rows and columns okay so this is all I wanted to talk about with regards to stacks I encourage you to check out the document for stack and see what other things you can do with it again I think that with a combination of alignment and position widgets in a stack you have enough flexibility to build almost anything you want okay so we've made good progress so far and the next thing that I want to talk about is a widget that is called expanded now this is also very common in flatter layouts and so let's see how it works and a good and fun way to introduce expanded is to talk about among mathematical sequence known as the fibonacci sequence so let's see what that is about so we can use the fibonacci sequence to generate an arrangement of squares where the side lengths are the first few Fibonacci numbers by the way if you want to know more about Fibonacci this page here on Wikipedia is very interesting but let's get back to our app so as you can see here we are using the Fibonacci numbers to create squares of increasing sizes so we have 1 1 2 3 5 & 8 and the way we implement this is with a combination of expanded and container widgets so let's take a look at the code for this so here we have a very nested widget tree which is made of a lot of different expanded objects with different flex values and the call for this might look a little bit complicated but don't let that discourage you I'll show you a simpler code example using expanded in the next section when we talk about padding so for now the important thing to remember is that you can use expanded widgets to define relative sizes between widgets so for example here we have an expanded widget with a flex of 5 which is this one and here we have another expanded widget of a flex of 3 and this is what determines the size of their children okay so now we are ready to move to next example in this application and that is where we talk about padding now padding is a way of adding space around or between your widgets and padding can be added horizontally or vertically or if you want you can even set it individually on the left top right or bottom of a widget now in this last example I refer exclusively to vertical padding but the same concepts apply in other directions as well so let's look at the code for this so as you can see here we have a column and inside here we have an array of children we use cross axis alignment stretch to ensure that the column fills up all the space that we are available vertically and the children in the code match the order in which they appear on screen so you can see the names here first 1st 2nd 2nd etc so let's look at all of these children individually so first of all we have a vertical padding and this is a convenience widget that I've created for this demo and it is defined over here so you can see that it has a padding which is defined by its insights dot symmetric with a vertical value this is what this means is that our child which in in the first case here is a text widget is surrounded by vertical spacing and that value is 16 points here in this example we choose to color the padding itself to make it more prominent so that you can see that the first row here as a color of green and the padding itself has a color of green just a little bit faded ok so the next widget is the second one which is shown in red and this is very similar to the first one and it also has a light red color for the padding next up is a sized box widget now this is a widget that we can use to specify a width and a height in this case we want to add a padding of 50 points between the second and the third line of text here so a very easy way of doing this is by adding a sized box because this is a column and the layout is vertical we only need to specify the height and we can omit the width so size box is a way of adding padding between widgets whereas a container padding is a way of adding padding around widgets so one might be more convenient than the other depending on your specific layout so I would choose them on a case-by-case basis so moving on we have a third line of text here and this is followed by an expanded widget with flex equals to one now this is a good time to explain more in detail what flex does so just like with size box expanded can be used to add space between widgets but the difference is that with size box you had to specify exactly the width or height that you want in points and expanded on the other hand takes the available space within the container and divides it proportionally according to the value specified with the Flex property so in this example we have a lot of widgets that have a fixed size and so in this layout there needs to be enough space to render all the widgets that have a fixed size but that me if any space is available we can use flags to fill it up so we have two expanded widgets that can be used to fill up the remaining space and you can see that the second one has a flex value of two and it is exactly twice as tall as the first one which has a flex of one and so this is how you can use expanded on this last screen we have seen a combination of various ways of adding padding to your layouts combining all this together gives you a very expressive way of creating layouts and the way I think of this widget is as a tool and with a lot of different tools that we can pick and choose for the task at hand now I wanted to say one last thing about expanded widgets and that is that the Flex option here is actually optional and what it means is that we could remove it and if we save in hot reload we're going to find out that now the height of the two widgets are now matching and so when you omit the Flex property and you have multiple expanded widgets within your layout they will all take up the same size and the same space okay so now let's zoom out and recap what we have seen today we started off by looking our rows and columns and how we can use the main axis alignment cross six alignment and main axis size properties to position our widgets ours needed then we took a look at dealing with text and and how we can align multiple text widgets according to their baseline we have seen how to use stacks and how they can be used to stack widgets on top of each other and the alignment and positioning properties that are available in flutter to do so we have taught about expanded widgets and how they can be used to fill space proportionally in your layouts and finally we have seen how to combine together various padding elements including how to use size box and expanded together in the same layout this is just an overview of the most common layout widgets in flutter I encourage you to read the documentation to find out what the other widgets are but in my experience I have been able to do more than 90% of my layouts with just a combination of the things that we have seen today so in conclusion I invite you again to check out the github repo for this video you can download the code and see how it looks so in here again you're going to be able to find all the code that we've seen today and you can also inspect it and learn how to actually build all the different controls that we have seen in order to switch between the different properties this demo one last thing is if you want to find more information about flutter I've created this website to help you learn more and so you can check out my youtube channel which you're ready on but also the blog over here and and read more articles about flutter so thank you very much for following this video today and I hope to see you again on the next videos

Channel: Code With Andrea

Views: 105,981

Keywords: flutter, dart, android, ios, mobile app development, programming, tutorial, course, udemy, coding, layout

Id: RJEnTRBxaSg

Length: 22min 40sec (1360 seconds)

Published: Sat May 26 2018