Original subtitles

0 So now that we're pretty much done with the design of our user interface, there's only one thing that 1

looks a little bit different from our original intention. 2

It's the fact that the dice images should probably be in the center of the screen. And it should have a 3

little bit of padding from the edges. 4

Let's go ahead and implement those changes. 5

Previously whenever we needed to embed a widget inside another widget, or add another widget somewhere 6

into the widget tree, we've always taken our widget out say, remove our row widget here and all its children 7

and instead return something like a center widget, which has a child which is now going to be the row 8

widget. And you can see that when I put that in there, and I delete all the parts I don't need, and I move 9

that semicolon down to the closing bracket for center, and add a comma there, 10

then you can see that this does what I need to do, which is to move our row into the center of the screen. 11

But that was kind of fiddly and especially messing around with the semicolons and commas. 12

You're bound to have issues eventually down the road. 13

So I want to show you a much easier way, and you're going to be using this a lot once you discover it. 14

Now it's important to first show you what the pain points are, which is why I've kept this in the secret 15

bag until now. 16

Let's say that we want to do the same thing as we did before. 17

We want to move our row from the top left corner of the body, which is this part below the app bar, all the 18

way to take up the center of the space. 19

So we need a center widget around our row. 20

And essentially, what we want to do, is to insert a center widget at this point here. 21

So below the scaffold but above the row, so that all of the row and the expanded widgets and dice images 22

are contained inside this center widget. So the widget that we want to embed inside a new widget is the 23

row. 24

And instead of cutting it out and moving it somewhere else before replanting it back here, we can simply 25

select it. 26

So put our cursor anywhere on the word row, and then go into our Flutter outline and we can click on 27

this button right here. 28

And if you hover over it for long enough, it'll tell you this button will center the widget that you've 29

currently got selected. 30

So in the outline you can see we've got the rows selected. When you click on it in the code, 31

It will move the selection in the tree. 32

But this is what we want to select and we're going to click on this button, and it will automatically 33

add that center widget around the row, which is almost like wizardry. 34

The beauty of this is that it'll move the semicolons or commas as needed. 35

It'll add that child property and we don't have to do anything other than just click on a button. 36

Now, there's many ways of actually getting Flutter to embed or add, and there's other things that we can 37

do automatically as well. 38

For example, if we wanted to embed our, I don't know, row inside a column, we could simply click on this 'wrap 39

with column' button, and now our row is inside a column. 40

I'm going to hit COMMAND + Z to go back before we get really lost in messing around with all the buttons. 41

But, another way of doing this is you can simply select the element inside the widget tree here, and you 42

can right click on it to send to the widget or add padding or wrap with column, wrap with row, wrap with 43

container. 44

And these are pretty much all of the most common things that you will want to do. 45

But sometimes, you might want to do something that's a little bit more specific, such as what if we wanted 46

to remove this expanded widget out of the tree. 47

But I wanted to leave the image widget where it is. Essentially, 48

I want to simply pluck that expanded widget out of the tree, and make the dice1 image a child of the 49

row, without having an expanded widget around it. Again, 50

normally that would be really really painful. 51

And over here you can't actually really do it when you right click, right? 52

What I need is a delete widget. 53

Now you can get access to that if you click in your code and you go over to that light bulb that shows 54

up. 55

And if you click on the dropdown list, you can see, oh we have more things that we can do. 56

We can remove our widget. 57

We can move our widget down, so that this one becomes the second child in the row, and it gets moved over 58

to the right of the row. Or we can remove widget. 59

And that achieves exactly what we were talking about which is removing the expanded widget from the 60

tree, but leaving the image where it is inside the row. 61

Now, I didn't actually want to do that because our design now looks like this. But I wanted to be able 62

to show you what you can do by tapping into these so called intention actions. 63

You can add padding, you can send to the widget, everything that we saw over here and there's more, 64

right? 65

For example, let me remove my expanded widget, and go back to the scenario where I wanted to wrap our 66

image inside an expanded widget. Instead of cutting it out, moving it around, doing all sorts of complicated 67

things, 68

I could have just clicked on the light bulb and clicked on 'wrap with new widget' and it will wrap my widget 69

inside a new widget at that position in the tree. 70

And now I get to type 'expanded' and it does exactly the same thing. My widget is now inserted into the 71

tree, and my image now looks as it should. The light bulb will show up 72

once you click on something that has these intention actions. So namely, in Android Studio, 73

if you have the dark mode enabled, it'll be something yellow, like center or row or expanded. One of the 74

widgets 75

basically. If you wanted to pull up that menu without needing your mouse, then you can move your cursor 76

to the widget that you want to embed or delete or do something to, and then hold down OPTION or ALT 77

and hit ENTER. 78

So it'll be ALT + ENTER for Windows, and OPTION + ENTER for Mac. and then you pull up that menu anyways and 79

this will be a really fast way of adding padding, of removing widgets, of doing all of these intention 80

actions. 81

And actually, what I want to do right now, is to add some padding around our dice images, so our expanded 82

widgets, in order for it to look a bit more like this. 83

So there's a bit of space in between the images and also from the sides of the screen. 84

So using the intention actions menu that we just talked about, can you insert 16 pixels of padding around 85

both dice, so that they end up looking like this. Pause video, and try and complete this challenge. 86

We've got our two image widgets, which we need padding around. 87

So all we need to do, is to put our cursor onto the widget that we need to pad, and we're going to hold 88

down OPTION or ALT, and hit ENTER. And then we're gonna select add padding. And automatically, a whole 89

bunch of code gets written for us. 90

And it's so simple that you could almost just hit TAB all day long, and get all your code written. 91

Now by default, when we insert padding it adds eight pixels of padding around all four edges, but that's 92

not enough for us. 93

So we're going to change that to 16. 94

And now, we have our images nicely padded. 95

And I can do the same thing to my other image. Add padding and change it to 16. 96

So now that we've achieved the look that we want, we're finally ready to start adding functionality to 97

our app. 98

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