All language subtitles for 10. Randomising the Dice

So in the last lesson, we switched up our stateless widget into a stateful widget. And now all the parts
1

of our screen which will update when the user interacts with it, namely parts that need to change their
2

state, is now inside something called a dice page state.
3

And here, we have a button that detects when the user presses on it. And when that happens, we tell the
4

app that we need to change state.
5

And the thing that needs to change is everywhere that uses the leftDiceNumber.
6

So when that happens, we look through this tree and our app will mark all the widgets that use that updated
7

value.
8

And it finds this one right here.
9

So now, it will update our image widget and redraw it with the updated dice image.
10

There's just one thing. We're still having to manually update the number here,
11

right?
12

If I type four and I hit save and I press the button, then it changes to four. But the user cannot change
13

our code.
14

So how can we get this left dice number to automatically change to a new random number between 1 and 6?
15

Well in order to do this, we need to import a new library.
16

The math library. If you were trying to get really good at knitting, then you might go into your local
17

library.
18

You might take out all of the books on knitting,
19

take it home. Study it. Read it. Learn it.
20

And in an ideal world, then you would be a world expert on knitting. And you'll be able to do all sorts
21

of knitting: knitting hats, knitting socks, knitting jumpers.
22

But if next week you decided that you wanted to be able to do things in the garden, you wanted to be able
23

to grow things, then you might check out the parts of the gardening library. In order to generate random
24

numbers,
25

we can check out the Dart math library. And this is a library that contains all sorts of mathematical
26

constants and functions plus a random number generator.
27

That's exactly what we need.
28

And once you use this library in your code by importing it into your project, then the things that your
29

program will be able to do include generate random numbers, or know what is the base of the natural logarithms.
30

That's a lot more maths than I would know, off the top of my head.
31

So let's go ahead and put that into our project. So we're going to go right up to the top and you can
32

see that we're already importing a library. And this is the material.dart library.
33

And this includes all the things such as how should a flat bottom look as opposed to a raise button?
34

The fact that we're able to simply just type out a widget like a flat button, and it knows exactly what
35

that should look like, how it should behave, is all thanks to this library.
36

So now we're going to power up our project even further by importing the Dart maths library.
37

So start writing maths,
38

it'll find the right one for you. Hit enter.
39

And we've now got the maths library.
40

Now initially, it'll show up as grey because it's telling you that you've quoted this library, but you're
41

not using it yet.
42

It's just getting a bit ahead of us.
43

We're gonna use it right now. Instead of setting our leftDiceNumber equal to 4 or 3 or 1 manually, which
44

is quite painful,
45

instead we're going to use something that comes along with the math library which is called random. And
46

random has a function called nextInt.
47

And how do I know this?
48

Well I read through the documentations. If we look at the random generator, then we can see that it has
49

a method called nextInt.
50

And this generates a non-negative random integer, so a random whole number, from 0 up to max and not including,
51

so excluding the max.
52

So the max is what you put inside the parentheses of this nextInt function.
53

And it will try to generate whole numbers between 0 and whatever it is this number is minus 1. So let's
54

see it in practice.
55

We're using the random number generator that comes from our Dart maths library. And we're using a method
56

called nextInt
57

that comes from the random number generator. And we're providing a maximum value between these parentheses.
58

So if we put in a number of six, what numbers do you think will be generated by our random number generator?
59

Well we can always test it out,
60

right?
61

There's nothing mysterious in programming.
62

Let's copy our line of code and let's head over to dartpad. And inside our main function, let's paste
63

in our leftDiceNumber. And let's add our int to create this new leftDiceNumber.
64

And of course, we need to import our Dart maths library.
65

Now we have pretty much the same conditions.
66

We have our Dart maths library imported,
67

so we can use our random number generator. And we've created this new variable called leftDiceNumber.
68

We've set it it's equal the random number generator using that nextInt method.
69

So now all we have to do is just to print out our leftDiceNumber into the console, and we click run
70

a couple of times just to see what it'll print out.
71

So we get 5. 1. 3.
72

And if you do this long enough, you'll realize that we'll get numbers between zero to six minus one.
73

So whatever we provide in here minus 1, which is 5.
74

So we'll get all the numbers between 0 and 5.
75

So it could be any of those numbers.
76

Now in our case, we can't actually have zero because we don't actually have an image called dice0.
77

And if you run this a few times and you click on the button, eventually the image will disappear because
78

it doesn't have a dice0.png.
79

Now what can we do to change that range from 0 - 5, to 1 - 6?
80

Well we just add one to this.
81

If it's gonna be a zero, it turns into one. If it's gonna be a five, it turns into six.
82

So now we can hit save and safely click on a button, and we will never get an empty image ever again.
83

So now in our flat button, when it detects a press, it will update the state of the screen to change all
84

the places that use leftDiceNumber to use this new value that we've generated using our random generator
85

which comes from our Dart maths library.
86

If only learning maths in real life was as simple as importing a maths library into your brain, right?
87

But in this lesson, we've looked at how we can use that library and the random number generator.
88

Now I have a challenge for you.
89

I want you to be able to do the same thing that we've done for the left dice, but for the right dice.
90

Because at the moment, it doesn't do anything when I click on it. And I want it to have the same behavior
91

of changing the number when I click on it,
92

just like this one. Once you are ready, pause the video and try to complete the challenge. In the next lesson,
93

I'll show you the solution.