Original subtitles

0 All right. So as I said, the first thing that we're going to do is build a scorekeeper to keep track of 1

how many questions the user it got right and how many they got wrong. 2

Now in order to do this, we're going to place our code at the end of our column. So our column has a number 3

of children. 4

It's got a couple of expanded widgets, one which is for the question and two for the answer buttons. 5

Now right at the bottom here you'll see a To do. And this is what we've put into these starting file 6

to tell you this is where your code for your scorekeeper should go. To dos are really helpful because 7

when you're working on a large project, the first thing you probably want to do is to break it down into 8

smaller more manageable bite-sized chunks. And then you're going to tackle each of those one by one until 9

your final project gets built. 10

So it's really easy to break down a large project into a series of to dos. And in Android Studio, in order 11

to create a to do, it's as simple as simply writing a comment. 12

So our two forward slashes, and then we write the word to do, and then we add a colon and afterwards we 13

tell our future self or other colleagues that we're collaborating with, what to do. 14

So once you've created your to do, you can find them inside the to do tab down here. 15

So if you click on that, it will show you all of the to dos in your project. 16

And at the moment, there's only one inside our Quizzler project and I'll show you how to find it. 17

It's inside the lib folder, inside the main.dart file. But a far easier way is to simply just double 18

click on the to do and it will take your cursor all the way to the place where it needs to happen. 19

First things first, let's delete this to do because we're going to do it right now. In future challenges, 20

we'll be setting the challenges for you, 21

each of the steps in the to dos. 22

So now that you understand how it works, you'll be able to use it to help you figure out what are all 23

the steps you need to complete. 24

All right. 25

So now that we've deleted the to do, we are perfectly positioned to create our scorekeeper. And our scorekeeper 26

is simply just going to be a row widget that's going to go into our column. And this row is going to 27

have a bunch of children which are icon widgets. 28

So we're going to create an icon widget, and we're going to say that the icon that's gonna be displayed 29

comes from the material icons. And the particular one that we're gonna show is something called check. 30

And you can see there's a little preview over here. 31

And when you hit ENTER, you'll see it show up over here in the gutter as well. 32

And this is simply just a tick. 33

We can change the color of our icon to a green color so that we can further make sure that the user 34

knows that when they see a tick, it means they've got the last question right. 35

But we can also add a icon for when they get something wrong. 36

So we'll add a icon that is the one called close. 37

And this is a nice little cross for us, to tell the user that they've got the last question wrong. 38

And this one is going to be red of course. 39

So now that we've got a green tick and a red cross, if we hit save and check out our project at the moment, 40

then we see our little row show up at the bottom. 41

So this is going to be our scorekeeper. 42

And as the user gets things right or as they get things wrong, we're going to add icons down here to 43

keep track of their score. 44

So this row is going to be building up by adding new icons like this, until the point where the user 45

is done with all the questions, and then we will clear this line out and delete all of the icon widgets. 46

Now we know that rows and columns can contain multiple widgets. 47

So in our column for example, we've currently got three expanded widgets and a row widget. And in this 48

row, we've got five icon widgets. But other ones such as a safe area or a padding widget or a center widget, 49

they can only have one child. 50

The difference between them is that the column widget can accept children in the form of a list. 51

Now a list is simply a way of grouping data into collections. 52

And this is a common thing that you can do across different programming languages. 53

So if you come from a different programming language, you might know list as an array. But in both cases, 54

it's a way for us to be able to group related pieces of data into a single list. 55

And later on, we can manipulate the list or tap into its contents. 56

Now we're going to go ahead and create a empty list, and we're going to do that right here. In order to 57

create a list in Dart, we're going to write the keyword list. 58

And this says that whatever variable that we're creating afterwards is going to be of type list, and 59

then we're going to give it a name, so we'll call this scoreKeeper, and it's gonna be set to equal 60

a empty list. 61

Now when you're working with collections, you'll often see these square brackets. 62

And in this case what these empty square brackets represent is just an empty list. 63

There's currently no items inside the list. But we can also add items to the list when we create it in 64

the same way that we did it for all rows and columns. 65

So when we said that this row is going to accept a bunch of children widgets, we had our opening square 66

bracket and our closing square bracket and in between are all the items in this particular list. 67

Now we can do that for our scoreKeeper as well. 68

I'm going to transplant some of these icons over, and I'm going to simply cut it and paste it in here. 69

So now we have a list that's called scoreKeeper and it contains five icons. 70

And later on if we decide that we want to use the list, then we can simply refer to it by its name. 71

So I'm going to delete everything on the right hand side of this children property. 72

I'm going to instead refer to my list I've created up here called scoreKeeper 73

like so. Now in this case, because scoreKeeper has a data type of list and the children property for the 74

row requires a list, 75

then these two sides left hand side and the right hand side, are compatible which is why this works. 76

Now notice that in this case, it's actually expecting a list of widgets whereas over here, our storekeeper 77

is a list of data that have a dynamic data type. 78

Now as we mentioned earlier, when you're using dynamic data types and a lot of things are happening, you 79

can very easily get into hairy situations. 80

So the best thing is to actually explicitly state what type of list it is that we're creating. 81

And by that we mean what kind of data can actually go into the list. 82

So for example, if I was to create a list of strings, then I could call it my strings. 83

And when I create it, it would contain strings like a and b and c. 84

Now in this case, the way that I could specify that this particular list called myStrings can only accept 85

strings inside the list, 86

I can do that by simply adding an angle bracket after the word list, and specify the data type that 87

goes into the list. 88

So in this case, it will be like this. 89

Well now I can, for example, create my list and start putting numbers in here. Or rather integers, because 90

it says that int can't be assigned to the list of type String. 91

So this makes our list a lot safer so that we don't accidentally put in the wrong data type. 92

Now up here, it's the same thing. 93

If we want to specify that we only want a list that contains widgets, then we can simply add the word 94

widget inside some angle brackets, right after our list. 95

Now in this case, because we know that everything that's inside this list are icons, we can also say that 96

this is a list of icons. And this still works down here because icons are in fact widgets. 97

So if this particular row can only take a list that have widgets, it is still compatible. 98

Now if I instead had a list of strings, which are definitely not widgets, then down here I will get an 99

incompatibility error. Because a list of strings can't be assigned to a list of widgets, but a list of 100

icons can. 101

So let's change that back. So now when I hit save and I check out my app, you can see that pretty much 102

nothing has changed. My row down here is created using my list called scoreKeeper rather than directly 103

creating it inside my row. The benefit of taking out my icons and putting it into a separate list means 104

that I can now add icons into my list of icons on the fly. 105

So for example, I can say that when the user presses on the True button, then inside the onPressed, I'm 106

going to get it to add an icon to my list of icons. 107

First of all I have to tap into my scoreKeeper list and then I'm going to use something called 108

.add, which adds a value inside the parentheses into the end of the list. And the length of the list will 109

grow by 1. 110

So we're going to say scorekeeper.add, 111

and the thing that we want to add is a new icon. 112

Remember that scorekeeper can only contain icons. 113

So we're going to create a new icon, and this icon is going to be a check sign. And it's going to have 114

a color of green. 115

So now that I've created my icon and I've added it to my scoreKeeper, all I have to do is to put it inside 116

a set state so that it will trigger a rebuild of my widget tree. 117

And that new icon will show up inside my scorekeeper row. 118

So let's go ahead and hit save to update our code. And now when I click on the true button, you can see 119

a little green checkmark will get added to my row. We've been able to do this because of the power of 120

Dart lists. 121

Now if this concept of lists is new to you, then I recommend heading over to the next lesson where we're 122

going to dive deep into Dart lists and we're going to learn more about how it works. 123

Now if you're already familiar with how lists or arrays work and this concept isn't new to you, then 124

feel free to skip the next lesson and head over to the lesson afterwards where we continue building 125

out our app.