All language subtitles for 6. Making the Dice Image Change Reactively

Now in previous lessons, we learned how we can wrap our images inside a flat button, so that when we click
1

on it we get something happening namely printing out the words 'Left
2

button got pressed' or 'Right button got pressed'.
3

Now that's not very interesting right?
4

It's not a great app as it is because the user can't see that. We need to be able to update our images
5

depending on when the user presses the button.
6

We know that our images come from our assets which include all of the images inside this images folder.
7

So that means I can tap into any of the dice images that I see here by simply changing that number.
8

So I could change it to a dice four and I hit save. Hot reload happens, and my left die becomes the fourth
9

die.
10

Now I frequently mess up the plural and singular of dice and die, so just bear with me here.
11

So again, we're not really interested in changing the code and then hot reloading and then changing the
12

image. The user can't do this either,
13

right?
14

We need to somehow link the changing of this one number to the user pressing a button. That way it actually
15

becomes an app with functionality.
16

What we're going to do is we're going to create a variable up here, inside our stateless widget here.
17

And we're going to create the variable by using the keyword var, and we're going to give our variable a
18

name, namely leftDiceNumber.
19

And this is going to refer to the number of the die that's going to be displayed on the left.
20

So we're going to change that to equal one.
21

And now, instead of having this being hardcoded, we're going to delete it and we're going to insert this
22

variable. And to do that in Dart, we're gonna use the dollar sign.
23

So we get to add one variable after the dollar sign.
24

And this is going to be the leftDiceNumber.
25

So now, when I run my app again, you'll notice there's just one problem.
26

If I change this variable now to say five, and I go ahead and I click on hot reload or I hit save, the change
27

doesn't actually happen here. Because remember that I said previously, when we hot reload, the thing that
28

gets rerun is our build method here.
29

So the block of code that's between that curly brace and this curly brace. So everything in between will
30

get triggered again and any changes in there will be reflected here.
31

But if our dice number is outside of our build method, then the change won't be reflected in our app.
32

So I have to cut this and paste it into here. And then if I hit save, then this build method gets rerun.
33

Our left dice number gets set to five, and wherever it's used gets updated. So where we create our variables
34

and where we use them matters a huge deal. But now instead of having a hardcoded number in here that
35

is one or two or five, we now have a variable that's determining what it is.
36

And so if this variables equal to five, then this line becomes images/dice5.png It gets
37

inserted in here. And this is all because we're able to use variables in Dart to achieve this.
38

So in the next lesson, I want to talk a little bit more about variables in Dart. And especially for those
39

you guys who are seeing variables for the first time, it'll be really important to understand how they
40

work and especially how they work in Dart.
41

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