Original subtitles

0 Now in this lesson, I want to talk to you about one of the most fundamental widgets that we're going 1

to be using all the time, to lay out our apps. 2

And that is a container widget. 3

Now a container widget, for those you guys who have done a little bit of Web Development or Web Design, 4

is very similar to a Div. 5

It's essentially just a layout box. 6

You can position it and move it around on the screen, and then you can give it a child to display such 7

as an image or a piece of text. 8

Now whenever you're using a new widget from Flutter, my top tip is to always start with the documentation. 9

As I said previously, Flutter's documentation is really good. And all you have to do to find it, is head 10

over to flutter.dev and we're going to go over to the widget catalog. And again, you'll find this 11

URL to get here directly, in the course resources. 12

Now once you're here, you can see that the team has organized all of the widgets based on what they do. 13

And we've already seen some of the images and assets widgets, but now we're going to be looking at the 14

layout section. And these other widgets that allows you to arrange other widgets. So how to position things 15

on screen. And under the layout widget, 16

you can see that they are split by single-child widgets and multi-child widgets. A widget that can contain 17

a single widget, say a piece of text or an image, or lots of different widgets, such as five images or an 18

image and a piece of text. 19

And in this module, we're going to be exploring both single child, and multi-channel widgets to learn 20

how to lay out your screen, exactly the way that you want it to look. 21

The most commonly use single child widget is probably going to be a container. 22

And if we click on it, we get taken to the container class. And this is a widget that allows us to position 23

other widgets and size other widgets. 24

And if you read through this, you'll learn a lot about exactly how it works. 25

And one of the things that it tells you is that, containers with no children try to be as big as possible. 26

And this is exactly what we're seeing over here. 27

We have a container that is currently trying to be as big as possible. 28

How do we know that? 29

Well let's give it a color. 30

Let's see it for ourselves. 31

So let's go ahead and change this back to teal, and instantly, we have our background using hot reload. 32

And now inside the container, 33

so inside these round brackets, I'm gonna hit ENTER and I'm going to change its color. And here we get 34

to specify a color for our container. 35

Let's change our container to have a color of white. 36

So now when I hit save and hot reload, you can see that my entire screen changes to white, even though 37

we know that the background color is still teal. 38

And the reason for this is because our container is taking up all of the space that's available, exactly 39

as described here. 40

Containers with no children 41

try to be as big as possible. Our container currently doesn't have anything inside the child property. 42

So that's why it tries to be as big as possible. 43

But what if we did give it a child. 44

What if we gave it a child widget 45

that's a piece of text, say that just says 'Hello.' 46

Right. 47

Let's hit save, and immediately our container shrinks to the size of the child widget. And we could have 48

known this by reading the documentation. Containers with children size themselves to their children's 49

size. And our child in this case, is the piece of text and its size is determined by the font size of 50

that piece of text. 51

Now at the moment, you can see that all piece of text is kind of hidden away a bit by the bezel of our 52

iPhone screen, and on Android depending on which device you're simulating it on, it might also have a 53

notch like this. 54

So how do we keep our content that we put on screen, safe from all of these bordering elements like the 55

top bar where we've got our time and our signal and our notch? Well Flutter actually comes with a really 56

simple widget that does exactly this. 57

It's called a safe area. And anything that you put inside the safe area, will be inside the parts which 58

don't have a notch or an interactive area like this part on the iPhone here. 59

In order to embed our container inside a safe area, we can hold down OPTION or ALT and hit ENTER, to pull 60

up our intention actions here, our little menu. And I'm going to wrap our container, which is what's currently 61

selected, inside a new widget. And all that does, is it puts our previous container inside a new widget, 62

and it sets it as the child of that widget. 63

So now, we get to change this widget and I'm gonna call it a Safe Area, with a capital S and a capital 64

A. 65

Now as soon as I hit save, you'll see my container moves in to the safe area and it now only takes up 66

the space where it's visible to the user. 67

Whenever you're creating something for the user interface that you don't want to bleed all the way to 68

the edges but instead you want it to be fully visible to the user, 69

then you're gonna be using your safe area. 70

What else can you do with your container? 71

Well we can also change its size, such as its width and its height. 72

So if we just go ahead and add a new property called height, and let's set it to maybe a 100 pixels, 73

100 points. And let's change the width also to a 100. 74

So now we should have a 100 by 100, so a square container, as soon as I hit save. 75

And there you go. 76

We've got our square container, with a single child that is the piece of text that says 'Hello.' Now what 77

if I wanted my container to be a little bit offset from the edges of the screen. 78

What if I wanted to set a margin for my container? 79

Well, I can use the margin property. And to specify the margin property, we have to use something called 80

edge insets. 81

And you can see there's different types of insetting an edge. You can use the all, 82

which means that whatever you enter here, let's say 20 pixels, is going to be set for all four sides of 83

your container. 84

So there's now a little margin of 20, for the left, the top, the right and the bottom. 85

Now what if we didn't want that. 86

What if we wanted to only set it for the top and the bottom? 87

Well, then you can use symmetric. 88

So now you can say that for the vertical axes, I want it to have a 50, but for the horizontal axis, I only 89

want it to have 10 for the margin. 90

So now if we hit save, you can see that it's offset from the top by 50 and from the left and right it's 91

only 10. 92

And you can always view this easily by going to the Flutter Inspector and clicking on this button here. 93

And now, you can see the margin for our container at the top and bottom being 50, and the left and right 94

being 10. And you can also see the safe area which is this box over here as well. Now instead of symmetric 95

where you provide the same value for the top, bottom and the same value for left and right, you can also 96

give it different values for each side. So you can either say, 'from LTRB' 97

So this is left, top, right and bottom. Left, 98

let's say it's 30, top is 10, 99

right 100

is 50, bottom is 20. Every single side 101

I've given a different margin. And now, when I hit save, you can see how our box changes right. 102

You can see that the left is 30, the top is 10, the right is 50 and the bottom is 20. 103

So this box here, is what our margins are doing to our screen. But if you didn't want to have four values 104

specified, you can use the 'only'. So saying 'only' gonna set a margin for the left, which is 30. And now everything 105

else is left as zero and only the left gets that margin. 106

So there's all sorts of ways that you can do this. Now, 107

what if you wanted to have the child of the container to be a little bit more offset from the edge of 108

the container. 109

In this case, you wouldn't be using the margin and you would instead be using a padding. 110

So if you've ever worked with CSS or Web Design, then this will all feel very intuitive to you. 111

And remembering that the Flutter team actually came from a background of Web Development, 112

this is one of the reasons why it might be so familiar and so intuitive to work with. 113

So for the padding, it also expects a edge inset. 114

So let's go ahead and provide one. 115

And this allows us to set basically different values for the padding, for all four edges of whatever 116

it is that we're setting it to, which in this case is our container. 117

Let's add a padding for all sides, 118

that's 20. 119

And when I hit save, you'll see that I now have a little box inside my container, that's limiting the 120

child to this area right here. 121

And if I go ahead and remove all of these guidelines, then you can see that this is what I end up with. 122

I've got a container that's pushed slightly away from the edges of the screen, and I've got its content 123

pushed away from the edges of the container. 124

So margin is for the outside of your widget, and padding is for the inside of your widget. 125

And remember that a container can only have one child. 126

Right. 127

So for example, I can't have a piece of text and maybe say an image. That won't work. Because remember 128

the widget itself, can only have a single child. 129

So we're only laying out a single child. In the next lesson, we're going to look at some of the ways for 130

laying out multiple children namely, using widgets such as columns and rows. 131

So all of that and more, I'll see on the next lesson.