All language subtitles for 44. Resetting the Quiz

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French Download
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.