Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:02,230 --> 00:00:03,870 To have a text 2 2 00:00:03,870 --> 00:00:05,901 and below that text a couple of buttons, 3 3 00:00:05,901 --> 00:00:09,560 we now need an invisible, a layout widget. 4 4 00:00:09,560 --> 00:00:12,350 And there we can use the Column widget. 5 5 00:00:12,350 --> 00:00:14,130 Column, as the name suggests, 6 6 00:00:14,130 --> 00:00:16,520 is there to render widgets in a column 7 7 00:00:16,520 --> 00:00:19,010 because difference to text and so on 8 8 00:00:19,010 --> 00:00:22,850 is that this has a children named argument, 9 9 00:00:22,850 --> 00:00:25,980 which actually takes a list of widgets. 10 10 00:00:25,980 --> 00:00:27,258 Now, there are a couple of new things. 11 11 00:00:27,258 --> 00:00:31,820 This thing here between the angled brackets, that's new. 12 12 00:00:31,820 --> 00:00:34,140 And the square brackets here are also new. 13 13 00:00:34,140 --> 00:00:35,740 What does this all mean? 14 14 00:00:35,740 --> 00:00:37,830 Let's start with the square brackets. 15 15 00:00:37,830 --> 00:00:40,380 Dart, like many other programming languages, 16 16 00:00:40,380 --> 00:00:42,970 has the concept of lists. 17 17 00:00:42,970 --> 00:00:44,640 Thus far, we learned about strings, 18 18 00:00:44,640 --> 00:00:46,960 about integers, doubles and objects 19 19 00:00:46,960 --> 00:00:49,040 and everything is an object in the end. 20 20 00:00:49,040 --> 00:00:52,010 Now, lists are another type of data. 21 21 00:00:52,010 --> 00:00:54,760 A list is basically a group of data. 22 22 00:00:54,760 --> 00:00:56,820 So you can have a list of strings. 23 23 00:00:56,820 --> 00:00:59,950 For example, here we could add a variable, questions, 24 24 00:00:59,950 --> 00:01:02,790 and that could now be a list of text, 25 25 00:01:02,790 --> 00:01:04,440 a list of text questions, 26 26 00:01:04,440 --> 00:01:08,600 like what is your favorite color? 27 27 00:01:08,600 --> 00:01:13,490 By the way, if you would want to write what's here, 28 28 00:01:13,490 --> 00:01:15,780 and you use single quotes to enclose the string, 29 29 00:01:15,780 --> 00:01:17,860 then this single quote would quit the string, 30 30 00:01:17,860 --> 00:01:18,840 which is an error, 31 31 00:01:18,840 --> 00:01:22,560 and you can escape this by adding a backwards slash 32 32 00:01:22,560 --> 00:01:23,800 in front of this. 33 33 00:01:23,800 --> 00:01:26,900 Now what happens is that this single quote here 34 34 00:01:26,900 --> 00:01:31,600 is not treated as a quote that ends the string 35 35 00:01:31,600 --> 00:01:34,360 but instead as the quote character 36 36 00:01:34,360 --> 00:01:36,610 that should be part of the string. 37 37 00:01:36,610 --> 00:01:40,350 So that backward slash in front of it achieves that. 38 38 00:01:40,350 --> 00:01:42,860 So now we would have a question what's your favorite color? 39 39 00:01:42,860 --> 00:01:47,020 And also, what's 40 40 00:01:51,290 --> 00:01:53,663 your favorite animal, for example. 41 41 00:01:56,406 --> 00:01:58,540 Let's also add a trialing comma here. 42 42 00:01:58,540 --> 00:02:03,540 And now questions actually would be a list of string data. 43 43 00:02:03,760 --> 00:02:05,090 Now, the idea behind lists 44 44 00:02:05,090 --> 00:02:08,350 is simply that we can group related data together 45 45 00:02:08,350 --> 00:02:11,900 because in so many scenarios of programming 46 46 00:02:11,900 --> 00:02:13,810 but also in real-life actually, 47 47 00:02:13,810 --> 00:02:15,560 you work with lists of data. 48 48 00:02:15,560 --> 00:02:18,250 You have on your phone, on your real phone, 49 49 00:02:18,250 --> 00:02:19,980 if we take a real-life example, 50 50 00:02:19,980 --> 00:02:21,660 you have a list of contacts. 51 51 00:02:21,660 --> 00:02:25,090 Your friends, that's a list of persons, a list of people. 52 52 00:02:25,090 --> 00:02:27,540 And therefore, lists are also something 53 53 00:02:27,540 --> 00:02:29,130 that exist in programming 54 54 00:02:29,130 --> 00:02:31,160 and basically in any programming language, 55 55 00:02:31,160 --> 00:02:34,310 you can find and of course, also in Dart therefore. 56 56 00:02:34,310 --> 00:02:35,940 Lists are created with square brackets. 57 57 00:02:35,940 --> 00:02:37,770 What's also what I did up here. 58 58 00:02:37,770 --> 00:02:39,620 I created it with square brackets 59 59 00:02:39,620 --> 00:02:43,350 and therefore, lists are also created down there 60 60 00:02:43,350 --> 00:02:45,260 where we have a list of widgets 61 61 00:02:45,260 --> 00:02:47,560 and that's the angle bracket widget thing. 62 62 00:02:47,560 --> 00:02:49,450 This is a so-called generic type 63 63 00:02:49,450 --> 00:02:51,030 and so a little annotation, 64 64 00:02:51,030 --> 00:02:52,570 which we could also drop here 65 65 00:02:52,570 --> 00:02:54,800 because of type inference, 66 66 00:02:54,800 --> 00:02:57,940 this tells Dart that this list here 67 67 00:02:57,940 --> 00:02:59,670 will hold a list of widgets 68 68 00:02:59,670 --> 00:03:02,040 because a list can, of course, hold anything. 69 69 00:03:02,040 --> 00:03:04,000 This, for example, is a list of strings. 70 70 00:03:04,000 --> 00:03:05,640 If I hover over questions, 71 71 00:03:05,640 --> 00:03:07,680 we see that Dart was able 72 72 00:03:07,680 --> 00:03:09,470 to automatically infer this. 73 73 00:03:09,470 --> 00:03:11,870 List, and then again, this angle bracket thing 74 74 00:03:11,870 --> 00:03:13,230 but here with string. 75 75 00:03:13,230 --> 00:03:15,510 A generic type is basically an annotation, 76 76 00:03:15,510 --> 00:03:18,350 which you can have on some types 77 77 00:03:18,350 --> 00:03:22,740 that allow Dart to understand that this is not just a list 78 78 00:03:22,740 --> 00:03:25,500 but a list of a specific data type here, for example. 79 79 00:03:25,500 --> 00:03:27,100 It's the same thing down there. 80 80 00:03:27,100 --> 00:03:28,870 This is a list of widgets. 81 81 00:03:28,870 --> 00:03:30,430 Now, because of type inference, 82 82 00:03:30,430 --> 00:03:33,490 we can remove that as soon as we start adding widgets here. 83 83 00:03:33,490 --> 00:03:36,800 And there, I would want to have my text widget 84 84 00:03:36,800 --> 00:03:38,610 with the question, 85 85 00:03:38,610 --> 00:03:40,360 and I'll add some real text soon, 86 86 00:03:40,360 --> 00:03:42,810 and below that, a couple of buttons. 87 87 00:03:42,810 --> 00:03:45,620 Now, there are different kinds of buttons in Flutter. 88 88 00:03:45,620 --> 00:03:47,912 One of them is the RaisedButton, 89 89 00:03:47,912 --> 00:03:49,710 which is a button with a background color 90 90 00:03:49,710 --> 00:03:51,510 and a little hover effect. 91 91 00:03:51,510 --> 00:03:55,370 Now, depending on the Flutter version you're using, 92 92 00:03:55,370 --> 00:03:59,700 the RaisedButton might have this strike through effect here 93 93 00:03:59,700 --> 00:04:02,610 as it does here for me in this example. 94 94 00:04:02,610 --> 00:04:04,710 The reason for this is that the RaisedButton 95 95 00:04:04,710 --> 00:04:08,760 has been deprecated with Flutter version two. 96 96 00:04:08,760 --> 00:04:11,720 Now, that sounds big, but it doesn't mean that much. 97 97 00:04:11,720 --> 00:04:13,690 You can still use RaisedButton. 98 98 00:04:13,690 --> 00:04:16,480 It's not insecure, not bad to use it. 99 99 00:04:16,480 --> 00:04:17,800 You can stick to it 100 100 00:04:17,800 --> 00:04:21,220 and to follow along smoothly with this course, 101 101 00:04:21,220 --> 00:04:23,943 I do recommended that you stick to RaisedButton. 102 102 00:04:25,120 --> 00:04:29,290 Alternatively, you could switch to ElevatedButton, 103 103 00:04:29,290 --> 00:04:32,450 which in the end is the alternative to RaisedButton, 104 104 00:04:32,450 --> 00:04:34,223 the replacement for RaisedButton. 105 105 00:04:35,210 --> 00:04:37,540 And for the moment, for the next minutes, 106 106 00:04:37,540 --> 00:04:39,690 you would use ElevatedButton 107 107 00:04:39,690 --> 00:04:42,800 just as I use RaisedButton here. 108 108 00:04:42,800 --> 00:04:45,140 So you add the same arguments 109 109 00:04:45,140 --> 00:04:47,240 to the constructor then. 110 110 00:04:47,240 --> 00:04:48,570 Nonetheless, as mentioned, 111 111 00:04:48,570 --> 00:04:50,460 I would recommend that you stick 112 112 00:04:50,460 --> 00:04:52,790 to RaisedButton for now for the moment 113 113 00:04:52,790 --> 00:04:54,630 to follow along smoothly. 114 114 00:04:54,630 --> 00:04:56,920 I will migrate to the newer buttons 115 115 00:04:56,920 --> 00:04:59,230 in future Flutter upgrades 116 116 00:04:59,230 --> 00:05:02,540 but since you will find a lot of projects out there, 117 117 00:05:02,540 --> 00:05:05,320 which use these deprecated buttons 118 118 00:05:05,320 --> 00:05:07,580 and since these deprecated buttons 119 119 00:05:07,580 --> 00:05:10,310 will stay around for quite a long time, 120 120 00:05:10,310 --> 00:05:13,680 I do recommend that you follow along with them for now. 121 121 00:05:13,680 --> 00:05:16,370 However, attached, you also find a link 122 122 00:05:16,370 --> 00:05:19,590 with more information about the new buttons 123 123 00:05:19,590 --> 00:05:21,420 replacing those old buttons, 124 124 00:05:21,420 --> 00:05:23,800 why they exist and what they do. 125 125 00:05:23,800 --> 00:05:26,750 But here, I will stick to RaisedButton for now. 126 126 00:05:26,750 --> 00:05:29,400 If you wanna get rid of that strike through effect, 127 127 00:05:29,400 --> 00:05:32,136 you can do that in your settings here 128 128 00:05:32,136 --> 00:05:34,820 in the Visual Studio Code settings. 129 129 00:05:34,820 --> 00:05:37,050 There if you search for deprecated, 130 130 00:05:37,050 --> 00:05:41,180 you can disable this Show Deprecated setting here 131 131 00:05:41,180 --> 00:05:43,040 and if it is disabled, 132 132 00:05:43,040 --> 00:05:46,823 you will not have this strike through effect here anymore. 133 133 00:05:47,760 --> 00:05:50,060 Now, the RaisedButton here is again a widget, 134 134 00:05:50,060 --> 00:05:53,320 which we create by instantiating our class here 135 135 00:05:53,320 --> 00:05:55,100 and it typically has a child, 136 136 00:05:55,100 --> 00:05:57,910 which is basically the content inside of the button 137 137 00:05:57,910 --> 00:06:00,620 that could be an image, that could be an icon 138 138 00:06:00,620 --> 00:06:02,630 but often it's also just some text. 139 139 00:06:02,630 --> 00:06:05,020 So the text which is displayed on the button. 140 140 00:06:05,020 --> 00:06:08,290 Again, this is a widget, not just some string. 141 141 00:06:08,290 --> 00:06:10,340 The child here is a widget instead 142 142 00:06:10,340 --> 00:06:14,610 and therefore, here we could have Answer 1. 143 143 00:06:14,610 --> 00:06:19,290 And then I can copy that line and add it again 144 144 00:06:19,290 --> 00:06:22,010 so that we also have Answer 2 145 145 00:06:22,010 --> 00:06:24,720 and maybe also Answer 3. 146 146 00:06:24,720 --> 00:06:27,650 Now, each button, besides having a child 147 147 00:06:27,650 --> 00:06:31,970 also needs an onPressed argument 148 148 00:06:31,970 --> 00:06:35,820 and onPressed will be a function that should be executed 149 149 00:06:35,820 --> 00:06:39,270 when this button is well, pressed. 150 150 00:06:39,270 --> 00:06:41,700 For the moment, since we haven't really learned 151 151 00:06:41,700 --> 00:06:42,800 how to wire that up, 152 152 00:06:42,800 --> 00:06:44,070 let's add null here. 153 153 00:06:44,070 --> 00:06:46,900 Null is a special value in Dart. 154 154 00:06:46,900 --> 00:06:48,690 It basically means nothing. 155 155 00:06:48,690 --> 00:06:51,760 The difference to void is that void is a type. 156 156 00:06:51,760 --> 00:06:53,960 So here we say the type of data main returns 157 157 00:06:53,960 --> 00:06:55,780 is empty, it's nothing. 158 158 00:06:55,780 --> 00:06:58,170 And null is not a type but a concrete value, 159 159 00:06:58,170 --> 00:07:00,790 just like one is a value, the number one, 160 160 00:07:00,790 --> 00:07:03,680 or like this here is a value, null is a value, 161 161 00:07:03,680 --> 00:07:05,330 which says nothing. 162 162 00:07:05,330 --> 00:07:07,930 But we need to add that to avoid errors. 163 163 00:07:07,930 --> 00:07:10,480 So here I add onPressed to all my buttons 164 164 00:07:10,480 --> 00:07:12,453 and for all buttons, I then add null. 165 165 00:07:13,840 --> 00:07:16,970 And with that again, I hit my code formatting shortcut 166 166 00:07:16,970 --> 00:07:20,193 so that this gets formatted in a bit of a nicer way. 167 167 00:07:21,070 --> 00:07:23,750 And again, if we add trailing commas, like here, 168 168 00:07:23,750 --> 00:07:25,760 after null in my first button, 169 169 00:07:25,760 --> 00:07:27,330 then this gets formatted in a bit 170 170 00:07:27,330 --> 00:07:29,320 of a more readable way. 171 171 00:07:29,320 --> 00:07:31,430 So now I added my Column widget, 172 172 00:07:31,430 --> 00:07:33,570 which has a couple of child widgets 173 173 00:07:33,570 --> 00:07:35,640 where we have the Text widget and then the RaisedButton. 174 174 00:07:35,640 --> 00:07:37,620 And if we save that, 175 175 00:07:37,620 --> 00:07:39,260 now we see our text up here 176 176 00:07:39,260 --> 00:07:40,770 and then we see the three buttons 177 177 00:07:40,770 --> 00:07:43,910 and they are currently all disabled 178 178 00:07:43,910 --> 00:07:45,870 because onPressed is null 179 179 00:07:45,870 --> 00:07:48,250 and that means if we press this button right now, 180 180 00:07:48,250 --> 00:07:51,240 nothing happens and Flutter automatically detects this 181 181 00:07:51,240 --> 00:07:52,900 and then disables the button, 182 182 00:07:52,900 --> 00:07:54,110 which sometimes can be nice 183 183 00:07:54,110 --> 00:07:56,020 if you have a user input form 184 184 00:07:56,020 --> 00:07:58,020 where you gather the email address 185 185 00:07:58,020 --> 00:07:59,450 and the password of the user. 186 186 00:07:59,450 --> 00:08:01,180 Then you would want to disable the button 187 187 00:08:01,180 --> 00:08:03,370 as long as nothing valid has been entered. 188 188 00:08:03,370 --> 00:08:06,448 Here, however, of course, I want to enable them. 189 189 00:08:06,448 --> 00:08:08,930 And for that, we have to understand 190 190 00:08:08,930 --> 00:08:11,010 how we wire up the button here 191 191 00:08:11,010 --> 00:08:14,580 to some function that does something 192 192 00:08:14,580 --> 00:08:16,260 or how we make sure that something happens 193 193 00:08:16,260 --> 00:08:18,130 when the button is tapped. 194 194 00:08:18,130 --> 00:08:20,380 Of course, we can also improve the styling 195 195 00:08:20,380 --> 00:08:23,350 and how this is laid out here on the screen 196 196 00:08:23,350 --> 00:08:25,140 but we'll do this in a second step. 197 197 00:08:25,140 --> 00:08:27,500 For now, it was important to understand 198 198 00:08:27,500 --> 00:08:31,180 how we can have more than one widget next to each other 199 199 00:08:31,180 --> 00:08:34,140 with the help of Column for ordering widgets 200 200 00:08:34,140 --> 00:08:35,410 from top to bottom. 201 201 00:08:35,410 --> 00:08:37,520 If you would want to say have them sit next 202 202 00:08:37,520 --> 00:08:39,110 to each other left to right, 203 203 00:08:39,110 --> 00:08:40,840 you would have used Row instead 204 204 00:08:40,840 --> 00:08:42,240 but we'll see Column and Row 205 205 00:08:42,240 --> 00:08:43,700 and all these other invisible 206 206 00:08:43,700 --> 00:08:45,800 and visible widgets throughout the course. 17603