Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:02,140 --> 00:00:03,240
Now, to finish this up
2
2
00:00:03,240 --> 00:00:05,340
and make sure we can restart the quiz
3
3
00:00:05,340 --> 00:00:07,460
from inside that results screen,
4
4
00:00:07,460 --> 00:00:09,220
let's make sure that in the results screen,
5
5
00:00:09,220 --> 00:00:10,740
we always have a button we can press
6
6
00:00:10,740 --> 00:00:13,770
to reset our question progress.
7
7
00:00:13,770 --> 00:00:16,360
And for that, we need to add a button below our text.
8
8
00:00:16,360 --> 00:00:17,230
How do we do that?
9
9
00:00:17,230 --> 00:00:20,410
How do we add things below other things?
10
10
00:00:20,410 --> 00:00:23,020
Widgets below other widgets.
11
11
00:00:23,020 --> 00:00:25,070
Well, we need a column.
12
12
00:00:25,070 --> 00:00:27,410
So, let's wrap our text in a column.
13
13
00:00:27,410 --> 00:00:29,230
And previously I did this manually,
14
14
00:00:29,230 --> 00:00:30,870
but actually with the Flutter
15
15
00:00:30,870 --> 00:00:32,710
extension installed in the IDE,
16
16
00:00:32,710 --> 00:00:35,210
we can do some automatic refactoring.
17
17
00:00:35,210 --> 00:00:38,150
For this, use the refactoring shortcut,
18
18
00:00:38,150 --> 00:00:40,350
which you can find in your key bindings
19
19
00:00:40,350 --> 00:00:43,540
if you're not sure which shortcut that was,
20
20
00:00:43,540 --> 00:00:45,750
and position your cursor.
21
21
00:00:45,750 --> 00:00:49,580
So, click on the text here and then press that shortcut.
22
22
00:00:49,580 --> 00:00:52,040
And you should now get a couple of options here.
23
23
00:00:52,040 --> 00:00:54,830
And normally, one of them is wrap with column.
24
24
00:00:54,830 --> 00:00:55,730
If you don't have that,
25
25
00:00:55,730 --> 00:00:57,740
you can at least wrap it with a new widget
26
26
00:00:57,740 --> 00:00:59,650
and manually create a column.
27
27
00:00:59,650 --> 00:01:02,500
I do have it here however, so I will press enter.
28
28
00:01:02,500 --> 00:01:04,810
And now we automatically have this wrapped in a column
29
29
00:01:04,810 --> 00:01:07,963
and text is now already in the children array here.
30
30
00:01:09,320 --> 00:01:13,210
If we save that, now we see the centering is lost.
31
31
00:01:13,210 --> 00:01:16,530
That is the default behavior because the column by default
32
32
00:01:16,530 --> 00:01:19,070
takes all the available height of the view port,
33
33
00:01:19,070 --> 00:01:20,440
so of the screen,
34
34
00:01:20,440 --> 00:01:21,930
and for the moment we'll ignore that.
35
35
00:01:21,930 --> 00:01:24,230
We'll dive deeper into the depths
36
36
00:01:24,230 --> 00:01:27,100
of columns and rows and layouting in a separate section.
37
37
00:01:27,100 --> 00:01:28,750
So for now, let's live with that.
38
38
00:01:29,820 --> 00:01:31,540
Let's instead focus on adding
39
39
00:01:31,540 --> 00:01:33,940
an extra button below the text.
40
40
00:01:33,940 --> 00:01:35,830
We could add another RaisedButton here,
41
41
00:01:35,830 --> 00:01:37,900
but I will add a FlatButton.
42
42
00:01:37,900 --> 00:01:40,900
FlatButton is basically a button without a background color.
43
43
00:01:40,900 --> 00:01:43,470
Other than that, it's a normal button.
44
44
00:01:43,470 --> 00:01:46,130
And now, here's Max from the future again.
45
45
00:01:46,130 --> 00:01:49,460
The FlatButton which we use here can be used.
46
46
00:01:49,460 --> 00:01:50,870
There's nothing wrong with it
47
47
00:01:50,870 --> 00:01:53,450
and you therefore can stick to it.
48
48
00:01:53,450 --> 00:01:55,493
I will also stick to it in this lecture
49
49
00:01:55,493 --> 00:02:00,010
because this lecture was recorded with Flutter version one.
50
50
00:02:00,010 --> 00:02:04,670
Flutter version two, however, deprecated this FlatButton
51
51
00:02:04,670 --> 00:02:07,770
which is why you might see this strike through effect
52
52
00:02:07,770 --> 00:02:10,010
here in Visual Studio Code.
53
53
00:02:10,010 --> 00:02:12,340
This deprecation does not mean
54
54
00:02:12,340 --> 00:02:14,410
that you can't use the button anymore.
55
55
00:02:14,410 --> 00:02:16,530
You can, and there's nothing wrong with it.
56
56
00:02:16,530 --> 00:02:18,670
It just means that there is a replacement
57
57
00:02:18,670 --> 00:02:20,490
which you could switch to.
58
58
00:02:20,490 --> 00:02:21,740
And that's the TextButton
59
59
00:02:22,580 --> 00:02:25,770
which you can use instead of the FlatButton.
60
60
00:02:25,770 --> 00:02:29,490
Now, if you do switch, you do use the text button
61
61
00:02:29,490 --> 00:02:33,260
just as I do use the FlatButton over the next minutes.
62
62
00:02:33,260 --> 00:02:35,570
So you will add the same arguments
63
63
00:02:35,570 --> 00:02:37,120
to the constructor here.
64
64
00:02:37,120 --> 00:02:39,490
Nonetheless, to follow along smoothly,
65
65
00:02:39,490 --> 00:02:42,090
you can also stick to the FlatButton
66
66
00:02:42,090 --> 00:02:46,490
but you can also switch to the TextButton here.
67
67
00:02:46,490 --> 00:02:48,220
It needs a child, which is basically
68
68
00:02:48,220 --> 00:02:50,290
the content displayed on the button,
69
69
00:02:50,290 --> 00:02:51,740
and here a text will do
70
70
00:02:51,740 --> 00:02:54,007
and I will say, "Restart quiz!"
71
71
00:02:55,030 --> 00:02:57,064
We also, just like on the RaisedButton,
72
72
00:02:57,064 --> 00:02:58,530
you need an onPressed handler.
73
73
00:02:58,530 --> 00:03:01,740
Now, you know that onPressed needs a function reference,
74
74
00:03:01,740 --> 00:03:04,067
the address of a function.
75
75
00:03:04,067 --> 00:03:07,070
And restarting actually is some logic
76
76
00:03:07,070 --> 00:03:09,710
that probably has to be done in the main dart file
77
77
00:03:09,710 --> 00:03:13,290
because that is where we manage our current question index
78
78
00:03:13,290 --> 00:03:14,280
and the total score
79
79
00:03:14,280 --> 00:03:18,230
and both needs to be reset to zero in order to restart.
80
80
00:03:18,230 --> 00:03:21,230
So, in the main dart file, in the my app state class,
81
81
00:03:21,230 --> 00:03:23,310
we can add a new method,
82
82
00:03:23,310 --> 00:03:26,120
reset quiz or whatever you want to call it,
83
83
00:03:26,120 --> 00:03:30,050
and the goal here is to set both question index
84
84
00:03:30,050 --> 00:03:32,960
as well as total score back to zero.
85
85
00:03:32,960 --> 00:03:36,033
Because if we do reset that to zero,
86
86
00:03:36,870 --> 00:03:39,890
especially when we reset the question index,
87
87
00:03:39,890 --> 00:03:42,520
when we do that inside of set state,
88
88
00:03:42,520 --> 00:03:44,120
which you of course have to do,
89
89
00:03:44,120 --> 00:03:47,330
so inside of that function which we pass to set state,
90
90
00:03:47,330 --> 00:03:50,340
if we do that, then you know that the build method
91
91
00:03:50,340 --> 00:03:54,600
of this my app state class will be re-triggered.
92
92
00:03:54,600 --> 00:03:56,930
It will rebuilt that tree
93
93
00:03:56,930 --> 00:03:59,720
and there for all the reevaluate that condition
94
94
00:03:59,720 --> 00:04:03,160
and find out that now our question index is smaller
95
95
00:04:03,160 --> 00:04:05,090
than our question length again
96
96
00:04:05,090 --> 00:04:08,760
and hence not rendered the result anymore but the quiz.
97
97
00:04:08,760 --> 00:04:10,930
That's exactly what we want.
98
98
00:04:10,930 --> 00:04:13,780
So, now we have a reset function that should do the trick.
99
99
00:04:13,780 --> 00:04:15,370
Well we need it here in main dart,
100
100
00:04:15,370 --> 00:04:17,260
in our my app state class,
101
101
00:04:17,260 --> 00:04:21,030
but we want to trigger it from inside the result widget.
102
102
00:04:21,030 --> 00:04:23,690
However, that is something we did before as well.
103
103
00:04:23,690 --> 00:04:27,668
We simply need to pass a pointer to that function,
104
104
00:04:27,668 --> 00:04:28,980
to the result widget.
105
105
00:04:28,980 --> 00:04:30,870
So, I pass reset quiz
106
106
00:04:30,870 --> 00:04:33,920
without parentheses to the result widget,
107
107
00:04:33,920 --> 00:04:36,900
and in the result widget, we now need to accept this.
108
108
00:04:36,900 --> 00:04:39,910
So, add another property, a function,
109
109
00:04:39,910 --> 00:04:44,800
which is my reset handler or whatever you want to call it,
110
110
00:04:44,800 --> 00:04:48,320
and I will accept this as a second argument.
111
111
00:04:48,320 --> 00:04:50,980
So here, whatever I receive as a second argument
112
112
00:04:50,980 --> 00:04:53,150
is now stored in reset handler.
113
113
00:04:53,150 --> 00:04:56,210
And that is now what I bind to on pressed.
114
114
00:04:56,210 --> 00:05:00,630
So here we can bind resetHandler
115
115
00:05:00,630 --> 00:05:04,390
and with that, if we now save this, we see restart quiz.
116
116
00:05:04,390 --> 00:05:08,210
If I press that, indeed, we restart.
117
117
00:05:08,210 --> 00:05:11,930
Now, to make this stand out a little bit more,
118
118
00:05:11,930 --> 00:05:14,500
we can add some colors,
119
119
00:05:14,500 --> 00:05:16,490
some text color here to the flat button
120
120
00:05:16,490 --> 00:05:19,030
and maybe use blue here
121
121
00:05:20,243 --> 00:05:22,290
so that we can see that button a bit better.
122
122
00:05:22,290 --> 00:05:25,623
So, now if I press that, we can dive in again.
123
123
00:05:27,720 --> 00:05:30,200
Now again, max from the future here,
124
124
00:05:30,200 --> 00:05:33,610
if you're not using flat button but text button,
125
125
00:05:33,610 --> 00:05:37,160
this newer alternative which I mentioned earlier,
126
126
00:05:37,160 --> 00:05:38,310
if you're using that,
127
127
00:05:38,310 --> 00:05:42,630
then this text color argument is not supported.
128
128
00:05:42,630 --> 00:05:46,650
Instead, when using text button instead of flat button
129
129
00:05:46,650 --> 00:05:50,210
or elevated button instead of erased button,
130
130
00:05:50,210 --> 00:05:53,370
you style those buttons a bit differently.
131
131
00:05:53,370 --> 00:05:54,860
That's why I do recommend
132
132
00:05:54,860 --> 00:05:57,680
that you stick to raised button and flat button
133
133
00:05:57,680 --> 00:05:59,820
to follow along smoothly.
134
134
00:05:59,820 --> 00:06:02,280
Nonetheless, I'll show you here, how you would style it
135
135
00:06:02,280 --> 00:06:04,870
if you do switch to this text button.
136
136
00:06:04,870 --> 00:06:08,810
Then, instead of adding the text color argument here,
137
137
00:06:08,810 --> 00:06:12,140
there is a style argument, which you can add.
138
138
00:06:12,140 --> 00:06:17,067
And that one's button style object,
139
139
00:06:18,390 --> 00:06:19,540
which you instantiate
140
140
00:06:19,540 --> 00:06:22,770
with the button style widget class here,
141
141
00:06:22,770 --> 00:06:24,710
and there, you can set the different
142
142
00:06:24,710 --> 00:06:27,420
style properties of this button.
143
143
00:06:27,420 --> 00:06:30,240
Now here, we still don't have a text color
144
144
00:06:30,240 --> 00:06:32,600
just a text style property,
145
145
00:06:32,600 --> 00:06:34,590
which would allow us to turn it
146
146
00:06:34,590 --> 00:06:37,660
into an underlined text or anything like this.
147
147
00:06:37,660 --> 00:06:41,300
But we do have this foreground color property,
148
148
00:06:41,300 --> 00:06:44,210
which as we can see in the tool tip on the left,
149
149
00:06:44,210 --> 00:06:46,030
allows us to control the color
150
150
00:06:46,030 --> 00:06:49,590
for the button's text and therefore here,
151
151
00:06:49,590 --> 00:06:52,520
we can set foreground color to a color.
152
152
00:06:52,520 --> 00:06:56,370
But unfortunately, it's now no longer, color's not blue
153
153
00:06:56,370 --> 00:06:58,322
which was straight forward,
154
154
00:06:58,322 --> 00:07:03,322
but instead it's material, state, property, all,
155
155
00:07:06,630 --> 00:07:09,590
and then their color's blue.
156
156
00:07:09,590 --> 00:07:12,160
Yeah, that is a bit longer, I would argue.
157
157
00:07:12,160 --> 00:07:13,970
One of the reasons why I would recommend
158
158
00:07:13,970 --> 00:07:16,860
that you stick to flat button for the moment,
159
159
00:07:16,860 --> 00:07:21,120
but if you do switch, then you do set the color like this,
160
160
00:07:21,120 --> 00:07:24,160
by adding style button style foreground color,
161
161
00:07:24,160 --> 00:07:26,680
material state property, all,
162
162
00:07:26,680 --> 00:07:29,890
and pass colors blue to this all method,
163
163
00:07:29,890 --> 00:07:31,023
which is called here.
164
164
00:07:32,320 --> 00:07:34,860
And with that, if we go through that quiz,
165
165
00:07:34,860 --> 00:07:38,670
we again got this button here with the blue color.
166
166
00:07:38,670 --> 00:07:42,980
Now, set on this new text button instead of the flat button
167
167
00:07:42,980 --> 00:07:45,313
to which you can switch if you want to.
168
168
00:07:46,800 --> 00:07:47,790
This is all looking good.
169
169
00:07:47,790 --> 00:07:49,410
We cannot reset this.
170
170
00:07:49,410 --> 00:07:50,530
I won't argue,
171
171
00:07:50,530 --> 00:07:52,260
the user interface itself
172
172
00:07:52,260 --> 00:07:55,180
is not the most beautiful one I've ever seen,
173
173
00:07:55,180 --> 00:07:58,240
but we'll learn more about building user interfaces,
174
174
00:07:58,240 --> 00:08:01,180
styling your applications, and also layouting,
175
175
00:08:01,180 --> 00:08:03,380
so that we can also center vertically
176
176
00:08:03,380 --> 00:08:04,650
when we're using a column,
177
177
00:08:04,650 --> 00:08:06,340
something we lost for now.
178
178
00:08:06,340 --> 00:08:08,840
We'll dive into all of that later throughout the course.
179
179
00:08:08,840 --> 00:08:11,840
For the moment, we had an extensive look
180
180
00:08:11,840 --> 00:08:15,093
at all the core basics you need to know about Flutter.
15691
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.