Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,430 --> 00:00:06,300
All right. So as I said, the first thing that we're going to do is build a scorekeeper to keep track of
1
2
00:00:06,360 --> 00:00:10,080
how many questions the user it got right and how many they got wrong.
2
3
00:00:10,080 --> 00:00:17,820
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
4
00:00:17,820 --> 00:00:18,830
of children.
4
5
00:00:18,840 --> 00:00:26,480
It's got a couple of expanded widgets, one which is for the question and two for the answer buttons.
5
6
00:00:26,610 --> 00:00:32,210
Now right at the bottom here you'll see a To do. And this is what we've put into these starting file
6
7
00:00:32,520 --> 00:00:39,120
to tell you this is where your code for your scorekeeper should go. To dos are really helpful because
7
8
00:00:39,180 --> 00:00:44,910
when you're working on a large project, the first thing you probably want to do is to break it down into
8
9
00:00:44,910 --> 00:00:51,120
smaller more manageable bite-sized chunks. And then you're going to tackle each of those one by one until
9
10
00:00:51,120 --> 00:00:53,130
your final project gets built.
10
11
00:00:53,130 --> 00:01:01,530
So it's really easy to break down a large project into a series of to dos. And in Android Studio, in order
11
12
00:01:01,530 --> 00:01:06,240
to create a to do, it's as simple as simply writing a comment.
12
13
00:01:06,240 --> 00:01:12,690
So our two forward slashes, and then we write the word to do, and then we add a colon and afterwards we
13
14
00:01:12,720 --> 00:01:19,690
tell our future self or other colleagues that we're collaborating with, what to do.
14
15
00:01:19,680 --> 00:01:25,600
So once you've created your to do, you can find them inside the to do tab down here.
15
16
00:01:25,650 --> 00:01:30,710
So if you click on that, it will show you all of the to dos in your project.
16
17
00:01:30,860 --> 00:01:36,590
And at the moment, there's only one inside our Quizzler project and I'll show you how to find it.
17
18
00:01:36,600 --> 00:01:42,690
It's inside the lib folder, inside the main.dart file. But a far easier way is to simply just double
18
19
00:01:42,690 --> 00:01:49,230
click on the to do and it will take your cursor all the way to the place where it needs to happen.
19
20
00:01:49,330 --> 00:01:56,130
First things first, let's delete this to do because we're going to do it right now. In future challenges,
20
21
00:01:56,130 --> 00:01:58,230
we'll be setting the challenges for you,
21
22
00:01:58,230 --> 00:02:00,030
each of the steps in the to dos.
22
23
00:02:00,210 --> 00:02:05,120
So now that you understand how it works, you'll be able to use it to help you figure out what are all
23
24
00:02:05,130 --> 00:02:07,200
the steps you need to complete.
24
25
00:02:07,200 --> 00:02:07,440
All right.
25
26
00:02:07,440 --> 00:02:14,670
So now that we've deleted the to do, we are perfectly positioned to create our scorekeeper. And our scorekeeper
26
27
00:02:14,670 --> 00:02:22,470
is simply just going to be a row widget that's going to go into our column. And this row is going to
27
28
00:02:22,470 --> 00:02:26,430
have a bunch of children which are icon widgets.
28
29
00:02:26,700 --> 00:02:32,280
So we're going to create an icon widget, and we're going to say that the icon that's gonna be displayed
29
30
00:02:32,340 --> 00:02:39,700
comes from the material icons. And the particular one that we're gonna show is something called check.
30
31
00:02:39,870 --> 00:02:42,420
And you can see there's a little preview over here.
31
32
00:02:42,450 --> 00:02:47,650
And when you hit ENTER, you'll see it show up over here in the gutter as well.
32
33
00:02:47,730 --> 00:02:50,850
And this is simply just a tick.
33
34
00:02:50,850 --> 00:03:00,090
We can change the color of our icon to a green color so that we can further make sure that the user
34
35
00:03:00,090 --> 00:03:03,900
knows that when they see a tick, it means they've got the last question right.
35
36
00:03:04,290 --> 00:03:08,490
But we can also add a icon for when they get something wrong.
36
37
00:03:08,520 --> 00:03:14,150
So we'll add a icon that is the one called close.
37
38
00:03:14,360 --> 00:03:20,080
And this is a nice little cross for us, to tell the user that they've got the last question wrong.
38
39
00:03:20,100 --> 00:03:23,370
And this one is going to be red of course.
39
40
00:03:23,370 --> 00:03:31,860
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
41
00:03:32,130 --> 00:03:35,550
then we see our little row show up at the bottom.
41
42
00:03:35,640 --> 00:03:37,650
So this is going to be our scorekeeper.
42
43
00:03:37,650 --> 00:03:45,600
And as the user gets things right or as they get things wrong, we're going to add icons down here to
43
44
00:03:45,600 --> 00:03:48,070
keep track of their score.
44
45
00:03:48,150 --> 00:03:56,970
So this row is going to be building up by adding new icons like this, until the point where the user
45
46
00:03:56,970 --> 00:04:05,470
is done with all the questions, and then we will clear this line out and delete all of the icon widgets.
46
47
00:04:05,480 --> 00:04:10,400
Now we know that rows and columns can contain multiple widgets.
47
48
00:04:10,670 --> 00:04:17,090
So in our column for example, we've currently got three expanded widgets and a row widget. And in this
48
49
00:04:17,150 --> 00:04:27,230
row, we've got five icon widgets. But other ones such as a safe area or a padding widget or a center widget,
49
50
00:04:27,260 --> 00:04:29,440
they can only have one child.
50
51
00:04:29,570 --> 00:04:38,890
The difference between them is that the column widget can accept children in the form of a list.
51
52
00:04:39,020 --> 00:04:45,800
Now a list is simply a way of grouping data into collections.
52
53
00:04:45,800 --> 00:04:51,020
And this is a common thing that you can do across different programming languages.
53
54
00:04:51,050 --> 00:04:58,080
So if you come from a different programming language, you might know list as an array. But in both cases,
54
55
00:04:58,260 --> 00:05:04,530
it's a way for us to be able to group related pieces of data into a single list.
55
56
00:05:04,530 --> 00:05:10,630
And later on, we can manipulate the list or tap into its contents.
56
57
00:05:10,650 --> 00:05:17,610
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
58
00:05:17,610 --> 00:05:22,200
create a list in Dart, we're going to write the keyword list.
58
59
00:05:22,320 --> 00:05:28,950
And this says that whatever variable that we're creating afterwards is going to be of type list, and
59
60
00:05:28,950 --> 00:05:35,820
then we're going to give it a name, so we'll call this scoreKeeper, and it's gonna be set to equal
60
61
00:05:35,910 --> 00:05:37,670
a empty list.
61
62
00:05:37,680 --> 00:05:43,260
Now when you're working with collections, you'll often see these square brackets.
62
63
00:05:43,260 --> 00:05:49,340
And in this case what these empty square brackets represent is just an empty list.
63
64
00:05:49,350 --> 00:05:56,930
There's currently no items inside the list. But we can also add items to the list when we create it in
64
65
00:05:56,930 --> 00:06:00,460
the same way that we did it for all rows and columns.
65
66
00:06:00,470 --> 00:06:08,300
So when we said that this row is going to accept a bunch of children widgets, we had our opening square
66
67
00:06:08,300 --> 00:06:16,020
bracket and our closing square bracket and in between are all the items in this particular list.
67
68
00:06:16,130 --> 00:06:19,310
Now we can do that for our scoreKeeper as well.
68
69
00:06:19,310 --> 00:06:27,250
I'm going to transplant some of these icons over, and I'm going to simply cut it and paste it in here.
69
70
00:06:27,830 --> 00:06:36,340
So now we have a list that's called scoreKeeper and it contains five icons.
70
71
00:06:36,800 --> 00:06:43,490
And later on if we decide that we want to use the list, then we can simply refer to it by its name.
71
72
00:06:43,490 --> 00:06:48,320
So I'm going to delete everything on the right hand side of this children property.
72
73
00:06:48,320 --> 00:06:53,840
I'm going to instead refer to my list I've created up here called scoreKeeper
73
74
00:06:56,270 --> 00:07:05,060
like so. Now in this case, because scoreKeeper has a data type of list and the children property for the
74
75
00:07:05,060 --> 00:07:08,000
row requires a list,
75
76
00:07:08,120 --> 00:07:14,630
then these two sides left hand side and the right hand side, are compatible which is why this works.
76
77
00:07:14,630 --> 00:07:23,750
Now notice that in this case, it's actually expecting a list of widgets whereas over here, our storekeeper
77
78
00:07:23,990 --> 00:07:28,610
is a list of data that have a dynamic data type.
78
79
00:07:28,610 --> 00:07:34,760
Now as we mentioned earlier, when you're using dynamic data types and a lot of things are happening, you
79
80
00:07:34,760 --> 00:07:37,490
can very easily get into hairy situations.
80
81
00:07:37,490 --> 00:07:44,530
So the best thing is to actually explicitly state what type of list it is that we're creating.
81
82
00:07:44,570 --> 00:07:49,640
And by that we mean what kind of data can actually go into the list.
82
83
00:07:49,640 --> 00:07:56,480
So for example, if I was to create a list of strings, then I could call it my strings.
83
84
00:07:56,660 --> 00:08:03,470
And when I create it, it would contain strings like a and b and c.
84
85
00:08:03,820 --> 00:08:11,140
Now in this case, the way that I could specify that this particular list called myStrings can only accept
85
86
00:08:11,140 --> 00:08:13,600
strings inside the list,
86
87
00:08:13,600 --> 00:08:19,960
I can do that by simply adding an angle bracket after the word list, and specify the data type that
87
88
00:08:19,960 --> 00:08:21,460
goes into the list.
88
89
00:08:21,460 --> 00:08:23,890
So in this case, it will be like this.
89
90
00:08:23,920 --> 00:08:30,910
Well now I can, for example, create my list and start putting numbers in here. Or rather integers, because
90
91
00:08:30,910 --> 00:08:35,150
it says that int can't be assigned to the list of type String.
91
92
00:08:35,200 --> 00:08:42,640
So this makes our list a lot safer so that we don't accidentally put in the wrong data type.
92
93
00:08:42,640 --> 00:08:45,240
Now up here, it's the same thing.
93
94
00:08:45,370 --> 00:08:51,700
If we want to specify that we only want a list that contains widgets, then we can simply add the word
94
95
00:08:51,700 --> 00:08:56,880
widget inside some angle brackets, right after our list.
95
96
00:08:56,890 --> 00:09:03,310
Now in this case, because we know that everything that's inside this list are icons, we can also say that
96
97
00:09:03,310 --> 00:09:12,280
this is a list of icons. And this still works down here because icons are in fact widgets.
97
98
00:09:12,280 --> 00:09:20,070
So if this particular row can only take a list that have widgets, it is still compatible.
98
99
00:09:20,080 --> 00:09:28,750
Now if I instead had a list of strings, which are definitely not widgets, then down here I will get an
99
100
00:09:28,750 --> 00:09:37,420
incompatibility error. Because a list of strings can't be assigned to a list of widgets, but a list of
100
101
00:09:37,450 --> 00:09:38,860
icons can.
101
102
00:09:39,370 --> 00:09:47,610
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
103
00:09:47,610 --> 00:09:55,590
nothing has changed. My row down here is created using my list called scoreKeeper rather than directly
103
104
00:09:55,590 --> 00:10:04,360
creating it inside my row. The benefit of taking out my icons and putting it into a separate list means
104
105
00:10:04,360 --> 00:10:10,000
that I can now add icons into my list of icons on the fly.
105
106
00:10:10,000 --> 00:10:18,190
So for example, I can say that when the user presses on the True button, then inside the onPressed, I'm
106
107
00:10:18,190 --> 00:10:23,010
going to get it to add an icon to my list of icons.
107
108
00:10:23,110 --> 00:10:28,330
First of all I have to tap into my scoreKeeper list and then I'm going to use something called
108
109
00:10:28,600 --> 00:10:38,080
.add, which adds a value inside the parentheses into the end of the list. And the length of the list will
109
110
00:10:38,080 --> 00:10:39,580
grow by 1.
110
111
00:10:39,580 --> 00:10:42,050
So we're going to say scorekeeper.add,
111
112
00:10:42,190 --> 00:10:46,090
and the thing that we want to add is a new icon.
112
113
00:10:46,120 --> 00:10:49,540
Remember that scorekeeper can only contain icons.
113
114
00:10:49,540 --> 00:10:57,940
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
115
00:10:58,000 --> 00:11:01,860
a color of green.
115
116
00:11:01,960 --> 00:11:10,690
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
117
00:11:10,750 --> 00:11:17,030
a set state so that it will trigger a rebuild of my widget tree.
117
118
00:11:17,200 --> 00:11:21,430
And that new icon will show up inside my scorekeeper row.
118
119
00:11:21,820 --> 00:11:30,470
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
120
00:11:30,560 --> 00:11:39,590
a little green checkmark will get added to my row. We've been able to do this because of the power of
120
121
00:11:39,680 --> 00:11:41,360
Dart lists.
121
122
00:11:41,360 --> 00:11:48,380
Now if this concept of lists is new to you, then I recommend heading over to the next lesson where we're
122
123
00:11:48,380 --> 00:11:53,590
going to dive deep into Dart lists and we're going to learn more about how it works.
123
124
00:11:53,660 --> 00:12:00,500
Now if you're already familiar with how lists or arrays work and this concept isn't new to you, then
124
125
00:12:00,500 --> 00:12:06,290
feel free to skip the next lesson and head over to the lesson afterwards where we continue building
125
126
00:12:06,290 --> 00:12:07,160
out our app.
15047
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.