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