All language subtitles for 2. Using the Expanded Widget to Create Flexible Layouts

All right.
1

So now that we're all set up and ready to go, we're going to get started designing the user interface
2

of our app.
3

Our app is going to have two images that are in a row, horizontally next to each other.
4

And as with every sort of Flutter app design, we're going to be using a lot of widgets to achieve this.
5

By now,
6

you're already pretty familiar with scaffolds and rows, because we've really done it.
7

And the design of this app should be quite familiar to you.
8

We're going to start off, as with all of our apps, with a scaffold,
9

and in this scaffold we're going to have an app.
10

But for the body of the scaffold, we're simply going to have a rope with two images each containing a
11

picture of a dice image.
12

Now that we've got an overview of what the user interface should look like,
13

let's go ahead and build it inside Android Studio. Now notice that the app bar is already set out for
14

you.
15

So we don't need to touch that. And the body is simply a stateless widget, similar to ones that we've
16

created before which gives us this crucial build method, which will refresh itself every single time
17

we hit save, or when we click on the hot reload button.
18

So is gonna make designing our app a lot easier.
19

Currently, our body is a dice page which only returns a container.
20

So that means that there's actually absolutely nothing on screen so far, because the container is pretty
21

much invisible.
22

Let's go ahead and return a row instead.
23

Now our row is going to have two children. And the two children are going to be two image widgets. The
24

image widget that we've been working with so far is something that looks like this.
25

We create an image, and we specify what kind of image we want to use.
26

And in this case of course we want to use an asset image, pulling in the images from our images folder.
27

Now because we've already got everything linked up inside our config file, we'll be able to tap into
28

to any of the images inside this folder, just by specifying the path to that image.
29

So in this case, the asset name is going to be a string inside some single quotes, and then it's images
30

/dice1.png
31

And as soon as I hit save, you'll see my dice show up on screen.
32

But there's a bit of a problem here.
33

Our dice the image is actually too big to fit onto the screen.
34

And we're seeing these yellow and black bars telling us that there's actually parts of the image that's
35

gone off the screen.
36

So as we know, the user interface of Flutter apps are painted onto the screen, on both iOS and Android.
37

So that means if you tell the app to paint something that's really really large, and it's going to go
38

off the screen on one side or multiple sides of the screen, then you're going to end up with these hatched
39

yellow and black bars.
40

So how can we solve this problem?
41

How can we get rid of these ugly yellow and black bars and make sure that all of the content we want
42

to show on the screen, actually fits on the screen?
43

First things first, I'm going to remember to add my commas after every parentheses, so that when I hit
44

save, Dart will automatically reformat it for me, and it looks far less confusing what's going on.
45

So we know that we've got a row with a single child at the moment, which is just an image widget, and
46

the image that's being displayed in that widget is an asset image and it comes from this file here.
47

Now this file, if you double click on it, is quite large.
48

It's actually 500 by 500 pixels large.
49

Now when that gets rendered on screen, normally you only have a width of about 300 and that's why it's
50

gone off the screen to the right.
51

There's a couple of ways that we can sort this out.
52

We can either change our images width property, so we can say that the width of this image should only
53

be 200 pixels.
54

So now, the image widget is only 200 pixels wide.
55

And that means our whole image can actually fit into the screen.
56

But the problem with this is, this is kind of hard coded right?
57

Say if we had a much smaller phone or say if the user turned their phone to landscape, then that kind
58

of layout doesn't really look great.
59

It's all the way bunched up to the left corner, and it's not taking up as much space as it could do.
60

And it's really not making the most of the screen real estate.
61

So what can we do about this?
62

Well, one of the most useful widgets that we can use to sort out this problem is something called expanded.
63

An expanded class has to be a child of a row or a column. And what it does, is that it will expand to
64

fill the available space in the main axis.
65

So that means that for a row, it'll try to fill as much horizontal space as it has,
66

and for a column, it'll try to be as tall as it can be.
67

So that means any children that you put into this widget will also expand and contract, depending on
68

how much space is available. Let's test this out in real life.
69

Let's delete that width property, so that we're no longer hard coding how our layout looks.
70

But let's make it adaptable, by embedding our image widget inside an expanded widget. So I'm going to
71

cut out my image widget.
72

I'm going to put it down at the bottom, and instead of it, I'm going to add my expanded widget. And inside
73

this widget, it can only have a single child and that child is of course going to be our image widget
74

that we got from earlier on.
75

And I'm going to delete that extra comma, and now if I hit save, you'll notice that the expanded widget
76

automatically resizes to fill the available horizontal space, because we're inside a row.
77

Now if I changed that to a column, then you'll notice that it'll try to expand to fill the entire vertical
78

space. But we want to dice side by side.
79

So we're going to change this back to a row, and we're going to have our expanded widget making sure
80

that our image doesn't go off the screen, but takes up as much space as it can on the screen. The other
81

thing that you can do with an expanded widget is you can specify how much space it should take up compared
82

to other expanded widgets.
83

I'm gonna go ahead and copy this expanded widget, and I'm going to paste it into my row.
84

So I now have a row with two expanded widgets.
85

And as soon as I hit save, you can see that the both of them will try to take up as much space as it
86

can on the horizontal axis.
87

And because I have two expanded widgets, they only have half of the screen each.
88

So that's how much they each get.
89

But let's say that I wanted the one on the left to take up twice as much width as the one on the right.
90

I can do that really easily by simply adding a property called flex to my expanded widget. So I can say
91

that the one on the left,
92

so at the beginning of the row, it's gonna have a flex of two. And the one on the right is going to have
93

a flex of one.
94

What this does, is that it ensures that this expanded widget, expands to take up twice the width that
95

this one will do.
96

But still maintaining that everything is inside the space that's available in the screen.
97

So when I hit save, you'll see that this one becomes twice as wide,
98

and this one becomes only half as wide as this one.
99

So flex is really flexible.
100

You could say that. You could change the number to any ratio you want.
101

So you could turn this into 12 and you can change this into 5 if you wanted a ratio of 12 :
102

5.
103

And it means that you have a really adaptable way of switching up the sizes of all your widgets that
104

you put on the screen. But in our case, we actually don't need the flex widget because we want both of
105

them to take up the same amount of space.
106

And by default, every expanded widget gets its flex setting, set to 1.
107

And of course if they both have a flex of one, then it looks exactly like this.
108

They take up the same amount of space.
109

So this is already included in the expanded widget.
110

Now how do I know this?
111

Of course, it's the documentation.
112

Documentation is our friend. And as developers we might not have a lot of friends, but the documentation
113

is definitely one of them.
114

So if we scroll down, you'll notice that we have a lot of other properties that we can change.
115

But the most commonly ones that you'll be using when you're using this expanded class, is going to be
116

the flex. And if you come from Web Development and you've used Bootstrap, then this will be a really natural
117

concept to grasp.
118

Now if you've never done any Web Development, then don't worry.
119

It's really really simple.
120

The flex property is just a ratio. And once you have a play around with it, you'll understand it with
121

no problems.
122

Now that I've got both of my dice images onto the screen as a image widget, that has the image inside
123

it set to an asset image, I want to show you a slightly shorter way of doing this.
124

And the reason why I know this is because I went onto the widget catalog, and I had a look at the asset
125

images and icon widgets, and I selected the image widget that we're using. And it says here that there's
126

several convenient constructors to create an image. And we've been using simply a bog standard image
127

and then specifying the image property for it, using this image provider thing which can be an asset
128

image or network image. But actually, because you do this so often, the flutter team actually gave you
129

a very very simple factory method, which is image.asset or image.network.
130

So we can transform our code to make it a lot shorter by using this constructor instead.
131

Let's go over to our Android Studio. And instead of writing out all of this image code, I can simply write
132

image.asset and then specify the asset name, which is images/dice1.png. And that does exactly
133

the same as this, but it looks a lot shorter because using asset images is so common
134

they've added in a convenient way of creating this image widget.
135

So let's go ahead and transform this second image widget in the same way. And you can see now, our code
136

is a lot more concise. And that means there's less nesting and there's less potential issues that could
137

crop up. When you hit save,
138

nothing will change because it's still pulling in our image from our assets, and it's still displaying
139

it in a row.
140

Now in this lesson and in previous lessons, we've been moving widgets around by copying and pasting or
141

cutting it out and moving it around.
142

And that's quite error prone.
143

So in the next lesson, I want to show you a really convenient way of embedding a widget inside another
144

widget or deleting a widget if you need to. For all of that and more, I'll see on the next lesson.