Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:02,210 --> 00:00:04,170 Now, in this course section 2 2 00:00:04,170 --> 00:00:07,180 we learned a lot about the basics of Flutter 3 3 00:00:07,180 --> 00:00:11,440 and one thing you probably noticed is that if you're using 4 4 00:00:11,440 --> 00:00:14,630 a recent version of Flutter to be precise 5 5 00:00:14,630 --> 00:00:17,850 a version greater than Flutter 2, 6 6 00:00:17,850 --> 00:00:22,850 you got deprecation warnings for the buttons we used. 7 7 00:00:22,920 --> 00:00:25,740 And I did talk about that in the lectures 8 8 00:00:25,740 --> 00:00:29,000 where I introduced those buttons already. 9 9 00:00:29,000 --> 00:00:30,400 Now, in this course, 10 10 00:00:30,400 --> 00:00:33,210 we are going to work with those buttons a lot. 11 11 00:00:33,210 --> 00:00:36,330 And with that, I mean the RaisedButton, FlatButton 12 12 00:00:36,330 --> 00:00:37,780 and also the OutlineButton 13 13 00:00:37,780 --> 00:00:40,000 which is a never button, which you could use 14 14 00:00:40,000 --> 00:00:43,660 even though we haven't used it up to this point. 15 15 00:00:43,660 --> 00:00:46,830 We're going to work with those button widgets a lot 16 16 00:00:46,830 --> 00:00:49,820 and since this course was recorded prior 17 17 00:00:49,820 --> 00:00:54,820 to this deprecation, I do use these old buttons in quotes, 18 18 00:00:55,050 --> 00:00:56,180 in this course. 19 19 00:00:56,180 --> 00:00:58,700 Now, if you follow along with this course, 20 20 00:00:58,700 --> 00:01:01,150 you probably have the best course experience 21 21 00:01:01,150 --> 00:01:03,623 and it's easiest to follow along if you stick 22 22 00:01:03,623 --> 00:01:07,690 to these deprecated buttons to these old buttons 23 23 00:01:07,690 --> 00:01:11,275 so to say, because those buttons despite being deprecated 24 24 00:01:11,275 --> 00:01:15,210 are being used in a lot of projects all over the world, 25 25 00:01:15,210 --> 00:01:17,830 you will see them in a lot of our resources 26 26 00:01:17,830 --> 00:01:19,550 and tutorials as well. 27 27 00:01:19,550 --> 00:01:22,150 And using them as not wrong, you can use them, 28 28 00:01:22,150 --> 00:01:24,740 they are here and they will also stick around 29 29 00:01:24,740 --> 00:01:26,560 for many months to come. 30 30 00:01:26,560 --> 00:01:30,290 If you're getting annoyed by this deprecation warning here, 31 31 00:01:30,290 --> 00:01:33,100 in Visual Studio Code, if you you're getting annoyed 32 32 00:01:33,100 --> 00:01:36,660 by it as strike through effect, you can go to the settings 33 33 00:01:36,660 --> 00:01:39,990 and disabled that fact there by searching 34 34 00:01:39,990 --> 00:01:44,970 for deprecated and disabling this show deprecated option. 35 35 00:01:44,970 --> 00:01:47,280 That's an alternative, you don't have to do that, 36 36 00:01:47,280 --> 00:01:49,930 but you can do that if you wanna follow along 37 37 00:01:49,930 --> 00:01:52,003 with those existing buttons. 38 38 00:01:52,890 --> 00:01:55,190 But of course you can also switch, 39 39 00:01:55,190 --> 00:01:58,250 you can switch to the new equivalents 40 40 00:01:58,250 --> 00:02:00,838 for these buttons and follow along with these. 41 41 00:02:00,838 --> 00:02:05,200 That is all the fine and of course, a bit more future-proof. 42 42 00:02:05,200 --> 00:02:06,940 In the rest of this lecture, 43 43 00:02:06,940 --> 00:02:09,840 I will therefore show you how you can switch 44 44 00:02:09,840 --> 00:02:11,341 from the old to the new buttons 45 45 00:02:11,341 --> 00:02:16,341 especially when you also have some styling on those buttons. 46 46 00:02:17,020 --> 00:02:19,820 And with that, I'm talking about the RaisedButton, 47 47 00:02:19,820 --> 00:02:22,230 the FlatButton and the OutlineButton 48 48 00:02:22,230 --> 00:02:25,300 other buttons like floating action buttons 49 49 00:02:25,300 --> 00:02:28,430 or IconButtons are not deprecated. 50 50 00:02:28,430 --> 00:02:32,310 It's these three buttons which are deprecated. 51 51 00:02:32,310 --> 00:02:35,770 And hence, if you use RaisedButton, FlatButton 52 52 00:02:35,770 --> 00:02:37,870 or OutlineButton in your code, 53 53 00:02:37,870 --> 00:02:42,660 and you are using Flutter 2, you might see this strike 54 54 00:02:42,660 --> 00:02:45,840 through effect here in Visual Studio Code, 55 55 00:02:45,840 --> 00:02:49,560 which signals that you should not use that button anymore, 56 56 00:02:49,560 --> 00:02:53,180 though I will come back to this should not use part 57 57 00:02:53,180 --> 00:02:55,230 in a couple of seconds again. 58 58 00:02:55,230 --> 00:02:57,430 Now the most important message right away 59 59 00:02:57,430 --> 00:03:00,970 is that even though you should not use them anymore, 60 60 00:03:00,970 --> 00:03:04,170 you can absolutely still use them. 61 61 00:03:04,170 --> 00:03:07,580 If I would run this simple demo app here, 62 62 00:03:07,580 --> 00:03:10,850 which really just renders these three buttons, 63 63 00:03:10,850 --> 00:03:13,140 I can still see those three buttons 64 64 00:03:13,140 --> 00:03:16,560 on the screen and they do work, I can press them, 65 65 00:03:16,560 --> 00:03:19,280 I got no error, everything works. 66 66 00:03:19,280 --> 00:03:21,310 I get my log outputs down there 67 67 00:03:21,310 --> 00:03:23,450 from pressing these buttons. 68 68 00:03:23,450 --> 00:03:25,750 So I can continue using them 69 69 00:03:25,750 --> 00:03:28,810 and I don't have to change all of them right now. 70 70 00:03:28,810 --> 00:03:31,590 I can do this later in the future 71 71 00:03:31,590 --> 00:03:35,610 and indeed you will still see these old buttons 72 72 00:03:35,610 --> 00:03:39,170 in quotes get used a lot in other resources 73 73 00:03:39,170 --> 00:03:41,520 in example apps which you find out there 74 74 00:03:41,520 --> 00:03:45,540 and in existing code basis of existing projects. 75 75 00:03:45,540 --> 00:03:48,030 That's another reason why you might not wanna switch 76 76 00:03:48,030 --> 00:03:51,630 instantly because you will still find a lot of resources 77 77 00:03:51,630 --> 00:03:55,160 out there which do use these older buttons. 78 78 00:03:55,160 --> 00:03:58,280 Of course, the alternative to sticking 79 79 00:03:58,280 --> 00:04:03,180 to these buttons is to migrate to their new equivalents 80 80 00:04:03,180 --> 00:04:06,420 because these old buttons were deprecated 81 81 00:04:06,420 --> 00:04:10,570 because there were new button widgets introduced 82 82 00:04:10,570 --> 00:04:12,520 which you should use instead. 83 83 00:04:12,520 --> 00:04:15,970 And we're now going to migrate to these newer buttons 84 84 00:04:15,970 --> 00:04:18,430 step-by-step over the next minutes. 85 85 00:04:18,430 --> 00:04:20,330 And let's start with the RaisedButton. 86 86 00:04:21,400 --> 00:04:25,203 The RaisedButton will be replaced by an ElevatedButton. 87 87 00:04:26,950 --> 00:04:29,360 Now for the moment, we'll have to remove color 88 88 00:04:29,360 --> 00:04:31,960 and text color because the ElevatedButton 89 89 00:04:31,960 --> 00:04:34,140 does not support these arguments, 90 90 00:04:34,140 --> 00:04:37,550 but if we would have a button without any custom colors, 91 91 00:04:37,550 --> 00:04:40,769 then migrating to this new button is as simple 92 92 00:04:40,769 --> 00:04:43,320 as swapping out the name. 93 93 00:04:43,320 --> 00:04:45,690 Because it's then really just ElevatedButton 94 94 00:04:45,690 --> 00:04:47,330 instead of RaisedButton. 95 95 00:04:47,330 --> 00:04:51,770 And if I saved this, this button is still being rendered 96 96 00:04:51,770 --> 00:04:54,950 and I'm now using this ElevatedButton. 97 97 00:04:54,950 --> 00:04:58,440 Now, one thing you can already see here is, 98 98 00:04:58,440 --> 00:05:00,760 of course now that I migrated 99 99 00:05:00,760 --> 00:05:03,410 or switched to this ElevatedButton, 100 100 00:05:03,410 --> 00:05:07,350 we automatically have this blue background 101 101 00:05:07,350 --> 00:05:09,930 and this white text color, 102 102 00:05:09,930 --> 00:05:11,838 because the ElevatedButton, 103 103 00:05:11,838 --> 00:05:14,416 behind the scenes automatically picks up 104 104 00:05:14,416 --> 00:05:19,140 your main theme color set by your application. 105 105 00:05:19,140 --> 00:05:22,040 And that is blue in this case here. 106 106 00:05:22,040 --> 00:05:25,260 And therefore we automatically get this styling 107 107 00:05:25,260 --> 00:05:27,640 which is in-line with our theme 108 108 00:05:27,640 --> 00:05:30,400 which is one of the advantages of the new buttons, 109 109 00:05:30,400 --> 00:05:33,030 we don't have to add styles manually, 110 110 00:05:33,030 --> 00:05:35,510 we do get the base styling 111 111 00:05:35,510 --> 00:05:38,340 fitting our theme out of the box. 112 112 00:05:38,340 --> 00:05:41,562 But of course we can also still style them manually 113 113 00:05:41,562 --> 00:05:46,562 to override the theme color or add other extra stylings. 114 114 00:05:47,230 --> 00:05:48,790 And that's the biggest difference 115 115 00:05:48,790 --> 00:05:51,570 between the old and the new buttons. 116 116 00:05:51,570 --> 00:05:54,440 The old buttons had those extra arguments 117 117 00:05:54,440 --> 00:05:57,600 which you could set for styling them like the text color 118 118 00:05:57,600 --> 00:06:00,070 the border side ends on. 119 119 00:06:00,070 --> 00:06:02,400 The new buttons don't have that. 120 120 00:06:02,400 --> 00:06:06,920 Instead, the new buttons have a single new style argument 121 121 00:06:06,920 --> 00:06:10,290 which you can set to then style this button. 122 122 00:06:10,290 --> 00:06:13,950 And style wants a button style object, 123 123 00:06:13,950 --> 00:06:15,490 which you construct by instantiating 124 124 00:06:15,490 --> 00:06:18,230 the button style class. 125 125 00:06:18,230 --> 00:06:21,180 And it's then this button style class 126 126 00:06:21,180 --> 00:06:26,060 where you can set all kinds of styles for this button. 127 127 00:06:26,060 --> 00:06:30,050 And here, for example, you got a background color 128 128 00:06:30,050 --> 00:06:32,820 and you got a foreground color 129 129 00:06:32,820 --> 00:06:36,013 and you would use these colors to control the text editor 130 130 00:06:36,013 --> 00:06:37,730 well background color. 131 131 00:06:37,730 --> 00:06:39,650 Foreground color sets the text 132 132 00:06:39,650 --> 00:06:44,130 as you see background color sets to fill color. 133 133 00:06:44,130 --> 00:06:46,700 So here, if you wanna have a RaisedButton 134 134 00:06:46,700 --> 00:06:50,930 with a blue background color and the white foreground color, 135 135 00:06:50,930 --> 00:06:53,170 we could set background color here 136 136 00:06:53,170 --> 00:06:56,053 but then not to color start blue, 137 137 00:06:57,900 --> 00:06:59,310 you don't use it like this. 138 138 00:06:59,310 --> 00:07:03,713 Instead here, you then use material state property all 139 139 00:07:05,020 --> 00:07:08,170 and then pass colors, stop blue to that. 140 140 00:07:08,170 --> 00:07:09,370 Might look a bit strange, 141 141 00:07:09,370 --> 00:07:12,290 but that is how you do then assign a color 142 142 00:07:12,290 --> 00:07:15,300 to this background color argument here 143 143 00:07:15,300 --> 00:07:17,260 for this button style object, 144 144 00:07:17,260 --> 00:07:20,270 which we set as a style for this button. 145 145 00:07:20,270 --> 00:07:22,509 And for the foreground color it's materials 146 146 00:07:22,509 --> 00:07:26,740 state property all colors white. 147 147 00:07:26,740 --> 00:07:29,050 And if we would set this, 148 148 00:07:29,050 --> 00:07:31,570 then we would have this blue button still. 149 149 00:07:31,570 --> 00:07:34,360 But if I for example, switch my background 150 150 00:07:34,360 --> 00:07:36,680 color to orange and saved as 151 151 00:07:36,680 --> 00:07:39,270 now we have the orange button. 152 152 00:07:39,270 --> 00:07:41,930 So that's how we then style these new buttons 153 153 00:07:41,930 --> 00:07:44,578 with this extra style argument 154 154 00:07:44,578 --> 00:07:48,420 which takes such a button style object. 155 155 00:07:48,420 --> 00:07:50,190 Now, since assigning styles 156 156 00:07:50,190 --> 00:07:51,840 like this can be a bit annoying, 157 157 00:07:51,840 --> 00:07:54,410 especially drilling into the colors like this 158 158 00:07:54,410 --> 00:07:57,500 can be annoying, there is an alternative way 159 159 00:07:57,500 --> 00:08:00,410 of deriving this style for this button. 160 160 00:08:00,410 --> 00:08:04,740 You can use ElevatedButton, but then not instantiated 161 161 00:08:04,740 --> 00:08:08,020 but instead called a style from method there. 162 162 00:08:08,020 --> 00:08:10,920 And on this style from method, you then get a couple 163 163 00:08:10,920 --> 00:08:14,650 of styling arguments like primary, 164 164 00:08:14,650 --> 00:08:17,290 and you can then directly the set primary 165 165 00:08:17,290 --> 00:08:19,790 to a color like colors blue. 166 166 00:08:19,790 --> 00:08:23,560 And this will then affect all the parts of the button 167 167 00:08:23,560 --> 00:08:26,100 that make up this button. 168 168 00:08:26,100 --> 00:08:27,720 So for the ElevatedButton, 169 169 00:08:27,720 --> 00:08:29,670 that button has a background color 170 170 00:08:29,670 --> 00:08:31,680 and hence it's the background color 171 171 00:08:31,680 --> 00:08:33,853 that's targeted bright primary. 172 172 00:08:35,230 --> 00:08:40,060 You got up on primary argument to control the color 173 173 00:08:41,000 --> 00:08:43,780 of the content on the primary color. 174 174 00:08:43,780 --> 00:08:47,440 So in this case, the foreground color on the background 175 175 00:08:47,440 --> 00:08:51,610 so you could dense it this two colors dot white. 176 176 00:08:51,610 --> 00:08:54,880 And for example, change this to orange here 177 177 00:08:54,880 --> 00:08:57,960 and now with that we would have a simplified way 178 178 00:08:57,960 --> 00:09:01,573 of setting the background and the foreground color here. 179 179 00:09:03,714 --> 00:09:06,190 And you can use either of the two approaches. 180 180 00:09:06,190 --> 00:09:08,380 Create this button style object 181 181 00:09:08,380 --> 00:09:10,560 and set background and foreground color, 182 182 00:09:10,560 --> 00:09:12,960 which is very explicit, but a bit longer 183 183 00:09:12,960 --> 00:09:16,420 or use this style from method to set primary 184 184 00:09:16,420 --> 00:09:18,090 and on primary. 185 185 00:09:18,090 --> 00:09:21,914 Now attached to this lecture, you also find a link 186 186 00:09:21,914 --> 00:09:26,570 to the official button migration documentation, 187 187 00:09:26,570 --> 00:09:28,990 a document which will also explore 188 188 00:09:28,990 --> 00:09:30,950 how to migrate your buttons 189 189 00:09:30,950 --> 00:09:34,520 and which we'll dig a bit deeper into styling these buttons. 190 190 00:09:34,520 --> 00:09:38,263 And therefore you can check out that document as well. 191 191 00:09:39,600 --> 00:09:41,350 Now that's the ElevatedButton, 192 192 00:09:41,350 --> 00:09:43,950 which is our old RaisedButton. 193 193 00:09:43,950 --> 00:09:45,490 Now for the FlatButton, 194 194 00:09:45,490 --> 00:09:47,683 we now have them TextButton. 195 195 00:09:48,600 --> 00:09:51,020 The TextButton replaces the FlatButton 196 196 00:09:51,020 --> 00:09:53,060 and just like the ElevatedButton, 197 197 00:09:53,060 --> 00:09:57,550 it doesn't have these individuals style arguments anymore. 198 198 00:09:57,550 --> 00:09:59,680 Instead, it has one style argument, 199 199 00:09:59,680 --> 00:10:03,750 and here again you set a button style by instantiating it 200 200 00:10:03,750 --> 00:10:06,540 and then there you can set the foreground color 201 201 00:10:06,540 --> 00:10:08,040 to control the text 202 202 00:10:08,040 --> 00:10:09,880 and also still a background color, 203 203 00:10:09,880 --> 00:10:12,190 if you wanna add a background color. 204 204 00:10:12,190 --> 00:10:16,200 By default a TextButton does not have a background though, 205 205 00:10:16,200 --> 00:10:19,430 because the idea behind that TextButton is 206 206 00:10:19,430 --> 00:10:23,280 that it's just text no background color. 207 207 00:10:23,280 --> 00:10:25,810 But alternatively to setting this button style 208 208 00:10:25,810 --> 00:10:27,930 with foreground, and maybe background, 209 209 00:10:27,930 --> 00:10:29,025 and maybe other styles, 210 210 00:10:29,025 --> 00:10:33,000 you can also use TextButton style from here again, 211 211 00:10:33,000 --> 00:10:34,630 and then here set primary 212 212 00:10:34,630 --> 00:10:37,620 to colors dot blue or maybe orange. 213 213 00:10:37,620 --> 00:10:39,620 So did we see a difference? 214 214 00:10:39,620 --> 00:10:42,950 If I save this now the text is orange 215 215 00:10:42,950 --> 00:10:44,220 and that's important. 216 216 00:10:44,220 --> 00:10:47,136 Primary is not always the background color 217 217 00:10:47,136 --> 00:10:51,460 instead primary really targets the primary thing 218 218 00:10:51,460 --> 00:10:52,850 that makes up this button. 219 219 00:10:52,850 --> 00:10:54,310 And for an ElevatedButton, 220 220 00:10:54,310 --> 00:10:56,710 the primary element is the background 221 221 00:10:56,710 --> 00:11:00,760 because that's the main thing that makes up ElevatedButton. 222 222 00:11:00,760 --> 00:11:02,480 It's a button with a background 223 223 00:11:02,480 --> 00:11:05,870 and therefore for primary targets that background. 224 224 00:11:05,870 --> 00:11:09,330 And on primary targets, the foreground 225 225 00:11:09,330 --> 00:11:12,960 or the TextButton, the primary element is the text 226 226 00:11:12,960 --> 00:11:15,290 and hence primary targets the text color. 227 227 00:11:15,290 --> 00:11:18,737 Here, we also have no on primary argument we could set 228 228 00:11:18,737 --> 00:11:20,816 because the TextButton is about 229 229 00:11:20,816 --> 00:11:23,530 not having a background color. 230 230 00:11:23,530 --> 00:11:25,150 If you want the background color, 231 231 00:11:25,150 --> 00:11:27,180 use an ElevatedButton. 232 232 00:11:27,180 --> 00:11:29,563 So that's how we can translate the FlatButton. 233 233 00:11:30,450 --> 00:11:32,100 Now for the OutlinedButton, 234 234 00:11:32,100 --> 00:11:35,690 we have the new outlined button. 235 235 00:11:35,690 --> 00:11:38,020 So the extra D here matters 236 236 00:11:38,020 --> 00:11:42,010 and that will then replace your old OutlinedButton. 237 237 00:11:42,010 --> 00:11:45,760 Here, we again don't have those individual style properties 238 238 00:11:45,760 --> 00:11:49,220 instead, we can add the new style argument here, 239 239 00:11:49,220 --> 00:11:52,370 and set this to a borders style again 240 240 00:11:52,370 --> 00:11:55,660 where we then target the individual styling elements 241 241 00:11:55,660 --> 00:11:58,640 like side for the border side. 242 242 00:11:58,640 --> 00:12:00,425 So the border of color ends on 243 243 00:12:00,425 --> 00:12:03,760 or we use OutlinedButton style from, 244 244 00:12:06,950 --> 00:12:09,130 and then here again, we can, for example 245 245 00:12:09,130 --> 00:12:12,830 set the primary color to colors dot orange. 246 246 00:12:12,830 --> 00:12:14,040 And if we do that, 247 247 00:12:14,040 --> 00:12:17,270 you will notice that now it's the text again 248 248 00:12:17,270 --> 00:12:18,883 which is orange. 249 249 00:12:20,110 --> 00:12:21,500 For restyling the border, 250 250 00:12:21,500 --> 00:12:24,240 we have this site argument here, 251 251 00:12:24,240 --> 00:12:26,240 and you can always use the auto-completion 252 252 00:12:26,240 --> 00:12:29,810 to see which different arguments you can set here. 253 253 00:12:29,810 --> 00:12:33,270 And that wants a border side object 254 254 00:12:33,270 --> 00:12:36,590 which you construct by calling the borders site constructor 255 255 00:12:36,590 --> 00:12:41,403 and then there, you can set the color of the border site. 256 256 00:12:43,970 --> 00:12:45,830 So of the border overall. 257 257 00:12:45,830 --> 00:12:48,583 And if you now save this, you have an orange border. 258 258 00:12:49,880 --> 00:12:51,420 And that's how we can migrate 259 259 00:12:51,420 --> 00:12:54,452 from the old buttons to the new buttons. 260 260 00:12:54,452 --> 00:12:57,510 RaisedButton becomes ElevatedButton, 261 261 00:12:57,510 --> 00:12:59,630 FlatButton becomes TextButton 262 262 00:12:59,630 --> 00:13:04,630 and OutlinedButton becomes OutlinedButton with an extra D. 263 263 00:13:04,810 --> 00:13:09,580 For simple cases where you don't set any colors or styling, 264 264 00:13:09,580 --> 00:13:12,110 you can just swap the widget names 265 265 00:13:12,110 --> 00:13:14,190 for more complex buttons, 266 266 00:13:14,190 --> 00:13:17,840 where you do add your own colors or your own stylings. 267 267 00:13:17,840 --> 00:13:21,810 There you instead add this style argument 268 268 00:13:21,810 --> 00:13:24,630 instead of the individual style arguments. 269 269 00:13:24,630 --> 00:13:28,200 And then there, you either create a button style object 270 270 00:13:28,200 --> 00:13:30,661 with foreground background color and so on 271 271 00:13:30,661 --> 00:13:34,460 or you use these style from methods, 272 272 00:13:34,460 --> 00:13:36,430 on the button classes 273 273 00:13:36,430 --> 00:13:39,140 to assign primary colors, background colors, 274 274 00:13:39,140 --> 00:13:41,423 border colors and so on. 275 275 00:13:42,420 --> 00:13:43,270 Now, as I mentioned, 276 276 00:13:43,270 --> 00:13:45,920 you can stick to the old buttons as well. 277 277 00:13:45,920 --> 00:13:49,090 They will definitely also stay around for many months 278 278 00:13:49,090 --> 00:13:51,190 but you can, of course also migrate 279 279 00:13:51,190 --> 00:13:52,830 to these new buttons instead, 280 280 00:13:52,830 --> 00:13:54,932 because overall as you see, 281 281 00:13:54,932 --> 00:13:58,580 migrating isn't too difficult in the end. 282 282 00:13:58,580 --> 00:14:01,145 It's often just about swapping the names 283 283 00:14:01,145 --> 00:14:04,615 or also about adding these extra style arguments 284 284 00:14:04,615 --> 00:14:09,133 which then in the end also, aren't too difficult to use. 25087