Flutter Tutorial for Beginners #10 - Containers & Padding

Key Takeaways

alright then so now we've seen a few of the basic UI widgets that come along with flutter now let's turn our attention to layout so one of the simplest layout widgets that flutter has to offer is the container widget and it pretty much does what it says on the tin it acts as a container to another widget or wraps around it it's basically a convenience widget and it comes along with some properties like margin and padding and color etc so let's now try to create a new container widget and see how it works so inside the scaffold in the body property I've stripped everything out so before we have the center widget and some icons or text inside that I've stripped all of those away and now the body is gonna be a container or widget that's it so if we save this now then we're not going to see anything on the screen nothing happens because like I said this is just a container for all the widgets now there's several different properties we can apply to this container one of those properties is going to be a color property and that sets the background color of this container so what I'm gonna do is just set this to be gray and then we'll give this a strength of 400 so if I save this now then you'll notice the whole background area of this body now turns gray so when we create a container and it's got no children widgets inside it that container takes up the full space available to it in this case the whole body the whole screen inside the body now I said that a container acts as a wrapper to other widgets so what we could do is add on a child property and say for example we want to import some text into this container then I could do a text widget and just say hello and then if I save this now watch what happens we get hello up here and now the container the gray bit is only the same size as the widget inside it so if we don't have a child which inside it if I get rid of that then the container takes up the whole room available to me but the minute we have a child for example a text widget then the container restricts itself to the size of that child widget so in this case the size of the word hello okay so that's how a container works now one of the good things about containers is that we can add padding and margin to our child essentially and the way we do this is by first of all just using a padding property and remember padding is the inside space of an element so margin is the outside space the space outside the text and contain it if you like and the padding is the inside space so the space inside the container that is going to surround the text and we'll see the difference in a minute anyway for padding how do we do this we don't just write a number like 20 or something like that instead we have to use something called edge in sets so edge in sets is how a control space like padding and margin inside flutter now we say edge insects dot and then we use one of these different options symmetric and symmetric lets us control the padding across and upwards so if your up and down margin or up and down padding is the same and your left and right padding or margin is the same then we use symmetric and I'll show you that later on or we can use from left top right bottom so we specify individual values for the left margin or padding rather the top padding the right padding and the bottom planning so we can approach all of those different may if we have different values for each one or we can use all and that basically applies the same margin or padding around all sides and that's what I'm going to do for now so let me just say dots all and then we pass in a value here which is gonna be I don't know 20 so within here apply 20 pixels of padding around all edges so if I save this now we can see the inside space inside the container around the text is 20 pixels of padding in each direction now if I change this to for example symmetric let me do this symmetric and press Enter now this takes two parameters we need a horizontal value for the panning across and a vertical value for the padding in the vertical direction so let's do the horizontal first and we'll say that is 30 and then we'll also do a vertical and we'll say that is 10 so up and down it's gonna be 10 pixels of padding and left or right it's gonna be 30 pixels of padding now the other option was to use something called from left top right bottom so this allows us to pass four values one for the left one for the top one for the right and one for the bottom so I could say 10 and then oops it's in point zero then I'll do 20 point zero then I'll do 30 point zero and then finally at 40 point 0 so left 10 pixels top 20 pixels right 30 pixels and bottom 40 pixels of padding so if I save this now it's gonna look something like this okay so they're the different kind of values we can use for padding and it's exactly the same for margin so I could now do another property margin and then oops it doesn't know how to be in capitals margin and then this is going to be edge in sets as well and what I'm going to do is all to specify margin all the way around but we could use this as well if we wanted to or symmetric and I'm just gonna say 30 pixels all the way around so if I save this you're going to notice 30 pixels of margin around the container so padding is inside the container and margin is around the container okay cool so that's how we use containers to surround a child widget if we want some kind of container around that to give it some margin and padding now say for example I wanted to apply some padding to this text widget but I didn't need the margin and I didn't need the color well in that case we could use a padding widget instead of the container so let me get rid of all this and I'm gonna replace it with a padding widget so inside here we can have a child property and that is going to be a text widget which just says hello and then also we can have a padding property which is going to be the same it's gonna be edge inset and we'll say dot all but we could use symmetric or the other one and I'm gonna say 30 pixels all the way around save that and notice we get the text with the padding all the way around let me change this to about 90 so it's more obvious and we can see now we get 90 pixels are putting all the way around so if you ever find yourself wanting to apply some padding to a text widget or something else then you can use the padding widget but if you need to contain it with margin as well or maybe a color for the container then container is your best bet because the padding widget does not allow margin we can't use a margin property so if I try to say margin here is going to be edge in sets all and then do something like 30 if I try to do this then you're going to notice we get a red squiggly line because we can't use the margin property and the same is true for the color property we can't apply a color to a padding widget only the padding itself so we're going to see more of containers more imagined and more of padding in the rest of the playlist as we go forward so hopefully now you've got a basic understanding of how these different things work