Flutter Crash Course #9 - Containers

Key Takeaways

okay then so now we're in a position where we can start playing with a few different flutter widgets and using them within our application to begin with I want to quickly talk about one of the most basic layout widgets available to us which is the container widget now containers act as wrappers to other content or to other widgets I should say for example we might have this text widget which we can wrap with a container widget but why would we do that well when we use a container we can apply margin and padding to that container very easily which then gives the child text widget in this case some more space around it we can also apply a color to The Container if we wanted to Now by default a container's width and height matches whatever its child's width and height is but we can also override this and specify a different width and height for the container if we want to and when the container doesn't have a child it takes up all of the available space around it by default so these containers are quite flexible anyway that's a container in a nutshell now let's try using one in our code so I'm going to come over here and remove this text widget and instead we'll have a container widget now at the minute this Con gets an error so let's remove that shouldn't be there and now inside the container widget we have a child argument now the child argument would be whatever widget this container wraps so that could be a text widget for example now to begin with I don't want to add a child widget because I want to show you that by default the container takes up the full space available to it on the screen so all I'll do is give this a color instead we'll say color and then we'll use the colors class right here to use material design color which is going to be orange and then a comma remember after every property or argument we have a comma save that and we can see this big container all colored orange taking up all the available room now if we add a child property so I can say child is a text widget that says hello Ninjas like so and we get this blue squiggly line so we know we can add a const right here to optimize this I'm going to save it and notice now it no longer takes up the available space to it it just takes up the space required by the child widget so the same size as this right now if we want to override the width and Heights of the container we can do using width and height properties but just one quick thing if I come under the child and add a property like width for example notice this blue line right here and it says that the child argument should be last in the widget Constructor so again this is just basically not an error it's not going to not work but it wants you to put the child at the bottom all the time it should be the last argument so I'm going to remove that and then come up here put the width here instead so we'll set the width to be I don't know 200 for example pixels and then also we can set a height which is going to be 100 if I save that now notice we get this container which is 200 wide and 100 high so that's how we override the width and height now I'm not actually going to do that I want it to be the same size as the text so let's comment those out and now it goes back to this we can also add padding and margin to do that we can say padding as an argument name and then this is going to be Edge insets Dot and we use a method on this called all so this is how we provide padding and margins by using this Edge insets thing and then one of several different methods on that so when I use the all method it means apply padding to all of the sides equally so I just pass one value in here and then it applies padding to the top right bottom and left together 20 pixels now this is given us a blue squiggly line so just apply const in front of that all right so now if I save this we should see 20 pixels are padding all around the text awesome we can also give this margin so I'll say margin is going to be const and then again Edge insets this time we'll use a different method so we'll try this one right here but before we do that if you want to apply padding or margin to only one side you can use the only method and then a named argument so if we take a look at this only except these different arguments left top right and bottom so if we only want to apply margin to the left we'd say left here and then that would be I don't know 50 and then comma right at the end save this and we can see 50 pixels of margin on the left but nowhere else we're not going to use that what I'm going to you uh do is use this from ltrb so this stands for left top right bottom so they're just positional arguments this time we don't have to name them so I'm going to say 10 pixels on the left 40 pixels at the top to the right zero and then bottom is going to be zero like so save that and now we can see at the top we have 40 pixels to the left we have 10 pixels and no margin elsewhere awesome all right so there's one more thing I'd like to show you in this lesson and that's how we apply text styles to text that we display on the screen so for example we might want to color it differently we might want to give it a different font size different font weight Etc and we can do that by using the style argument right here and the value of that if we hover over this you're going to see is text style so a lot of the time you might not remember what the value of an argument should be just always hover over that argument to find out the value so I know this is text style like so and if we hover over text style we're going to see that we can pass in a bunch of different arguments to stylize the text like color background color font size font weight font style letter spacing Etc all these different things so I'm going to enter down and we're going to just use a few of these different things so then the first one is going to be the font size so we'll say font size like so and if we hover over this then we're going to see that this should be a double so I could just pass in 18 like so all right so letter spacing again it's just going to be a number and I can say four for that we'll say decoration which is the text decoration and if we hover over this you're going to see the type of this is text decoration okay so we know to say text decoration right here and you can see we have these different properties on the text decoration which we can use so let me finish typing this out text decoration and then dots and then I'm going to go with underline like so after that we're going to say font style and the font style if we hover over this we can see the type is font style so font style and then press dots and we can see italic there so we're going to use italic and this is the way we work with flutter applications to provide values like we wouldn't just say here for example a string and then italic instead we use different enom and classes and things like that and use properties and methods on those like this or like this to provide value okay and just remember if you're ever unsure of what a value should be you can't always hover over the argument name and look at what the property value should be all right so let me save this now hopefully we'll see that update over here which we do it now has some space between the letters that's the letter spacing bigger font size it's underline and italic awesome