1 00:00:00,530 --> 00:00:06,529 [Music] 2 00:00:06,529 --> 00:00:08,910 this video is sponsored by Ella node 3 00:00:08,910 --> 00:00:10,800 anyone can build on the node whether you 4 00:00:10,800 --> 00:00:12,630 need a development portfolio to land 5 00:00:12,630 --> 00:00:14,370 your next job or you're ready to put 6 00:00:14,370 --> 00:00:15,509 your app into production 7 00:00:15,509 --> 00:00:17,670 lonoa can get you there for $20 in free 8 00:00:17,670 --> 00:00:19,529 hosting credit click the link below or 9 00:00:19,529 --> 00:00:23,039 sign up at lynda.com / traversée hey 10 00:00:23,039 --> 00:00:24,300 what's going on guys welcome to my 11 00:00:24,300 --> 00:00:26,130 flutter crash course so in this video 12 00:00:26,130 --> 00:00:27,720 I'm going to show you how to get flutter 13 00:00:27,720 --> 00:00:29,910 up and running and talk about it a 14 00:00:29,910 --> 00:00:31,199 little bit what it is we're gonna look 15 00:00:31,199 --> 00:00:33,480 at just a couple slides and then jump 16 00:00:33,480 --> 00:00:35,489 into our project which is going to be a 17 00:00:35,489 --> 00:00:37,890 simple word pair generator app similar 18 00:00:37,890 --> 00:00:39,960 to the one that you'll find in the docs 19 00:00:39,960 --> 00:00:41,520 so if you want to use the fluttered 20 00:00:41,520 --> 00:00:43,920 documentation kind of as a supplement to 21 00:00:43,920 --> 00:00:45,899 this project then you can do that and 22 00:00:45,899 --> 00:00:47,879 this is meant to be a beginner course 23 00:00:47,879 --> 00:00:49,530 it's meant to be an introduction to 24 00:00:49,530 --> 00:00:52,440 flutter even your first your very first 25 00:00:52,440 --> 00:00:55,710 flutter video and projects so let's talk 26 00:00:55,710 --> 00:00:57,989 about what flutter is it's an SDK or 27 00:00:57,989 --> 00:01:00,149 software development environment and a 28 00:01:00,149 --> 00:01:03,780 UI toolkit from Google to build natively 29 00:01:03,780 --> 00:01:06,030 compiled apps for mobile web and desktop 30 00:01:06,030 --> 00:01:08,130 although it's mostly used for mobile and 31 00:01:08,130 --> 00:01:10,710 that's what we're focusing on and what's 32 00:01:10,710 --> 00:01:12,540 fantastic about flutter is that you can 33 00:01:12,540 --> 00:01:14,760 build very performant iOS and Android 34 00:01:14,760 --> 00:01:18,060 apps native apps using only one code 35 00:01:18,060 --> 00:01:20,310 base rather than the traditional route 36 00:01:20,310 --> 00:01:22,710 where you'd have either a Java or a 37 00:01:22,710 --> 00:01:25,020 Kotlin code base for your Android app 38 00:01:25,020 --> 00:01:26,549 and then you'd have a swift code base 39 00:01:26,549 --> 00:01:30,000 for your iOS app with flutter not only 40 00:01:30,000 --> 00:01:31,470 do we have a single code base but it's 41 00:01:31,470 --> 00:01:33,600 easier to create applications at least 42 00:01:33,600 --> 00:01:35,490 in my opinion and flutter is 43 00:01:35,490 --> 00:01:37,350 cross-platform you can use it on Mac 44 00:01:37,350 --> 00:01:38,850 Windows Linux although if you're 45 00:01:38,850 --> 00:01:41,970 building for iOS then you want to use a 46 00:01:41,970 --> 00:01:44,820 Mac and flutter is extremely fast it 47 00:01:44,820 --> 00:01:46,350 gives you that native field there's 48 00:01:46,350 --> 00:01:48,509 there's other options for mobile 49 00:01:48,509 --> 00:01:50,460 development using kind of the web 50 00:01:50,460 --> 00:01:52,409 technologies you know you have react 51 00:01:52,409 --> 00:01:55,470 native you have native script ionic some 52 00:01:55,470 --> 00:01:57,390 of the other ones but flutter is is 53 00:01:57,390 --> 00:01:59,280 generally faster because it doesn't have 54 00:01:59,280 --> 00:02:02,159 that extra JavaScript bridge to the OEM 55 00:02:02,159 --> 00:02:05,040 user interface flutter actually uses the 56 00:02:05,040 --> 00:02:08,039 native ARM architecture binary which 57 00:02:08,039 --> 00:02:10,709 makes flutter faster than all of its 58 00:02:10,709 --> 00:02:11,680 competitors 59 00:02:11,680 --> 00:02:13,989 so flutter uses a programming language 60 00:02:13,989 --> 00:02:16,120 called dart which is an object-oriented 61 00:02:16,120 --> 00:02:18,400 language that uses classes and it's 62 00:02:18,400 --> 00:02:20,349 optimized for building you eyes and it's 63 00:02:20,349 --> 00:02:22,900 very fast on all platforms now I realize 64 00:02:22,900 --> 00:02:24,489 that many of you probably don't know 65 00:02:24,489 --> 00:02:26,409 dart however if you know any language 66 00:02:26,409 --> 00:02:28,359 especially JavaScript I don't think 67 00:02:28,359 --> 00:02:29,799 you'll have a hard time picking it up 68 00:02:29,799 --> 00:02:32,409 because it actually resembles JavaScript 69 00:02:32,409 --> 00:02:34,269 in a lot of ways and it even has some 70 00:02:34,269 --> 00:02:36,790 elements of Java so many people learn 71 00:02:36,790 --> 00:02:39,129 flutter and dart simultaneously I do 72 00:02:39,129 --> 00:02:40,870 have plans on creating a dart crash 73 00:02:40,870 --> 00:02:43,329 course within the next month or so so if 74 00:02:43,329 --> 00:02:44,859 you're watching this in the future I 75 00:02:44,859 --> 00:02:46,720 will put the the link to that core that 76 00:02:46,720 --> 00:02:49,239 crash course in the description there's 77 00:02:49,239 --> 00:02:51,489 also plenty of other videos and and the 78 00:02:51,489 --> 00:02:53,530 documentation for dart is really good as 79 00:02:53,530 --> 00:02:56,079 well if you need help also we'll be 80 00:02:56,079 --> 00:02:58,750 using the flutter Visual Studio code 81 00:02:58,750 --> 00:03:01,180 extension which basically I mean any 82 00:03:01,180 --> 00:03:03,129 method or anything in dart you can just 83 00:03:03,129 --> 00:03:04,720 hover over and it'll tell you exactly 84 00:03:04,720 --> 00:03:07,209 what it does okay so don't worry about 85 00:03:07,209 --> 00:03:09,040 it if you've never even touched dart 86 00:03:09,040 --> 00:03:09,700 before 87 00:03:09,700 --> 00:03:12,189 so everything in flutter is essentially 88 00:03:12,189 --> 00:03:14,319 a widget and flutter widgets are made to 89 00:03:14,319 --> 00:03:16,780 look exactly like the stock OEM widgets 90 00:03:16,780 --> 00:03:18,970 pixel for pixel and material design 91 00:03:18,970 --> 00:03:21,340 comes out of the box with flutter some 92 00:03:21,340 --> 00:03:23,769 of the common widgets are scaffold which 93 00:03:23,769 --> 00:03:26,139 is like a high-level widget that can 94 00:03:26,139 --> 00:03:28,060 have lower-level ones inside of it like 95 00:03:28,060 --> 00:03:31,900 a container an image and icon even text 96 00:03:31,900 --> 00:03:34,209 and app bar things like that and there's 97 00:03:34,209 --> 00:03:35,799 a whole catalog of widgets and the 98 00:03:35,799 --> 00:03:37,900 documentation there's widgets for like 99 00:03:37,900 --> 00:03:41,079 animation and motion input accessibility 100 00:03:41,079 --> 00:03:42,970 pretty much anything that you can think 101 00:03:42,970 --> 00:03:46,479 of also widgets can be stateless or 102 00:03:46,479 --> 00:03:48,099 stateful which I'm going to talk about 103 00:03:48,099 --> 00:03:50,739 in the next two slides and there's a lot 104 00:03:50,739 --> 00:03:53,049 of similarities here with something like 105 00:03:53,049 --> 00:03:55,299 react or pretty much any front-end 106 00:03:55,299 --> 00:03:57,519 JavaScript framework instead of using 107 00:03:57,519 --> 00:03:59,859 components we use widgets and each 108 00:03:59,859 --> 00:04:01,989 widget has a build method that can be 109 00:04:01,989 --> 00:04:04,150 overridden just like in react you have 110 00:04:04,150 --> 00:04:07,180 render which is a you know a method 111 00:04:07,180 --> 00:04:09,819 within a component that will render it 112 00:04:09,819 --> 00:04:11,560 into the UI so there's a lot of 113 00:04:11,560 --> 00:04:14,079 similarities here so it's it's not the 114 00:04:14,079 --> 00:04:15,729 most difficult thing in the world to go 115 00:04:15,729 --> 00:04:19,030 from something like react to flutter all 116 00:04:19,030 --> 00:04:20,739 right so let's take a look at stateless 117 00:04:20,739 --> 00:04:22,840 and stateful widgets so stateless 118 00:04:22,840 --> 00:04:25,720 widgets are just that they're immutable 119 00:04:25,720 --> 00:04:28,060 basically the their state can't change 120 00:04:28,060 --> 00:04:30,940 during the runtime of the app and here's 121 00:04:30,940 --> 00:04:33,220 an example here where we have a class 122 00:04:33,220 --> 00:04:35,620 called Start screen and extends 123 00:04:35,620 --> 00:04:37,660 stateless widget and then we're just 124 00:04:37,660 --> 00:04:39,670 overriding the build method here and 125 00:04:39,670 --> 00:04:41,380 we're just returning basically an empty 126 00:04:41,380 --> 00:04:44,740 container widget so for stateful 127 00:04:44,740 --> 00:04:47,410 components I'm sorry stateful widgets we 128 00:04:47,410 --> 00:04:49,420 have mutable state that can be redrawn 129 00:04:49,420 --> 00:04:52,390 on the screen multiple times now in this 130 00:04:52,390 --> 00:04:55,960 example we have this this Start screen 131 00:04:55,960 --> 00:04:58,930 class which extends stateful widget and 132 00:04:58,930 --> 00:05:01,750 what we're doing here is instead of 133 00:05:01,750 --> 00:05:03,280 overriding a build method we're 134 00:05:03,280 --> 00:05:06,370 overriding create state and we're 135 00:05:06,370 --> 00:05:08,620 returning an instance of this start 136 00:05:08,620 --> 00:05:10,690 screen screen state which we have 137 00:05:10,690 --> 00:05:13,540 defined down here and down here we're 138 00:05:13,540 --> 00:05:16,030 overriding our build and we're 139 00:05:16,030 --> 00:05:18,070 outputting our UI which in this case is 140 00:05:18,070 --> 00:05:20,590 just an empty container so in most cases 141 00:05:20,590 --> 00:05:22,000 when you have a stateful widget you're 142 00:05:22,000 --> 00:05:24,580 gonna have two classes like this one to 143 00:05:24,580 --> 00:05:27,940 override the create state and then one 144 00:05:27,940 --> 00:05:30,580 to build your UI okay and if that's 145 00:05:30,580 --> 00:05:31,960 confusing don't worry about it we're 146 00:05:31,960 --> 00:05:33,850 gonna get more into that later okay so 147 00:05:33,850 --> 00:05:36,040 as far as setting up your system there's 148 00:05:36,040 --> 00:05:38,740 some requirements if you're building iOS 149 00:05:38,740 --> 00:05:41,350 apps on a Mac you need the latest Xcode 150 00:05:41,350 --> 00:05:43,690 and that will give you the iOS simulator 151 00:05:43,690 --> 00:05:45,400 that's what we'll be using to basically 152 00:05:45,400 --> 00:05:48,400 view our application on Windows you need 153 00:05:48,400 --> 00:05:50,440 Android studio and if you're on Mac and 154 00:05:50,440 --> 00:05:52,240 you're building for Android you need 155 00:05:52,240 --> 00:05:55,180 Android studio the SDK the emulator 156 00:05:55,180 --> 00:05:57,700 which is the AVD the Android virtual 157 00:05:57,700 --> 00:05:59,950 device so you need to get that stuff 158 00:05:59,950 --> 00:06:01,420 installed I already have it on my 159 00:06:01,420 --> 00:06:04,660 machine but I will show you where to get 160 00:06:04,660 --> 00:06:06,820 it and how to install it you also need 161 00:06:06,820 --> 00:06:09,190 the flutter plug-in for Android studio 162 00:06:09,190 --> 00:06:11,980 and then if you're using vs code you 163 00:06:11,980 --> 00:06:13,900 want the flutter extension which is 164 00:06:13,900 --> 00:06:18,100 fantastic it has a ton of intellisense 165 00:06:18,100 --> 00:06:20,050 features so if you if you're confused 166 00:06:20,050 --> 00:06:21,640 about what a certain widget is you can 167 00:06:21,640 --> 00:06:22,960 just hover over it it'll tell you 168 00:06:22,960 --> 00:06:26,050 exactly what it is and also we can use 169 00:06:26,050 --> 00:06:28,480 the debugger to run our application 170 00:06:28,480 --> 00:06:31,660 right in the iOS simulator so it's a 171 00:06:31,660 --> 00:06:34,120 really nice workflow alright so enough 172 00:06:34,120 --> 00:06:35,890 with these slides let's jump in and 173 00:06:35,890 --> 00:06:36,360 let's 174 00:06:36,360 --> 00:06:39,240 start to build our application alright 175 00:06:39,240 --> 00:06:40,710 so real quick I just want to go over the 176 00:06:40,710 --> 00:06:42,360 application will be building although 177 00:06:42,360 --> 00:06:44,370 this crash course isn't really about the 178 00:06:44,370 --> 00:06:46,259 application itself it's about learning 179 00:06:46,259 --> 00:06:48,060 the fundamentals of flutter to be able 180 00:06:48,060 --> 00:06:50,490 to build you eyes and widgets and stuff 181 00:06:50,490 --> 00:06:53,189 like that so basically we have a word 182 00:06:53,189 --> 00:06:55,229 pare generator and it's similar to the 183 00:06:55,229 --> 00:06:57,270 application and the docks so if you want 184 00:06:57,270 --> 00:06:59,430 to use that as a supplement you can and 185 00:06:59,430 --> 00:07:01,770 we just have a list view of different 186 00:07:01,770 --> 00:07:03,990 word pairs maybe for a server name or a 187 00:07:03,990 --> 00:07:05,610 user name or something like that 188 00:07:05,610 --> 00:07:07,949 and we can keep scrolling and it's just 189 00:07:07,949 --> 00:07:09,900 going to keep generating new word pairs 190 00:07:09,900 --> 00:07:12,180 and then on the side you can see we have 191 00:07:12,180 --> 00:07:13,860 these heart icons that we can actually 192 00:07:13,860 --> 00:07:16,949 click or we can click anywhere in the 193 00:07:16,949 --> 00:07:19,919 the what are called list tiles and that 194 00:07:19,919 --> 00:07:22,500 will select them as basically our 195 00:07:22,500 --> 00:07:24,479 favorites or our saved word pairs that 196 00:07:24,479 --> 00:07:26,490 we like and then we have this little 197 00:07:26,490 --> 00:07:29,340 list icon up here in the app bar that we 198 00:07:29,340 --> 00:07:31,229 can click and it will take us to a new 199 00:07:31,229 --> 00:07:33,659 page or a new route that shows us all of 200 00:07:33,659 --> 00:07:35,550 our saved word pairs or our favorite 201 00:07:35,550 --> 00:07:37,469 word pairs alright so we're gonna be 202 00:07:37,469 --> 00:07:39,180 dealing with routing we're gonna be 203 00:07:39,180 --> 00:07:41,370 dealing with a bunch of built-in widgets 204 00:07:41,370 --> 00:07:43,800 we're gonna deal with custom stateless 205 00:07:43,800 --> 00:07:45,779 and stateful widgets so we'll learn 206 00:07:45,779 --> 00:07:47,849 quite a bit in this crash course even 207 00:07:47,849 --> 00:07:50,219 though this is a pretty pretty useless 208 00:07:50,219 --> 00:07:52,979 application in general but I think 209 00:07:52,979 --> 00:07:54,389 you'll learn a lot of fundamentals so 210 00:07:54,389 --> 00:07:56,159 that you can move on to create your own 211 00:07:56,159 --> 00:07:58,229 stuff alright so that's it let's go 212 00:07:58,229 --> 00:08:00,750 ahead and get into it all right so as I 213 00:08:00,750 --> 00:08:02,699 mentioned before I have my machine set 214 00:08:02,699 --> 00:08:04,500 up for flutter development but I'm gonna 215 00:08:04,500 --> 00:08:06,360 go through and show you all the steps 216 00:08:06,360 --> 00:08:08,729 you need to take to get set up now if 217 00:08:08,729 --> 00:08:11,819 you go to the flutter dev website and 218 00:08:11,819 --> 00:08:14,400 you go to Docs and then get started you 219 00:08:14,400 --> 00:08:16,500 can pick on pick your system here for 220 00:08:16,500 --> 00:08:18,360 instance windows and it gives you some 221 00:08:18,360 --> 00:08:20,729 instructions download the SDK and so on 222 00:08:20,729 --> 00:08:23,099 but I've actually created a gist to 223 00:08:23,099 --> 00:08:26,159 really just lay things out in a simple 224 00:08:26,159 --> 00:08:28,259 manner so first thing you want to do is 225 00:08:28,259 --> 00:08:31,259 download the SDK so from here again 226 00:08:31,259 --> 00:08:33,630 choose whatever system you're on I'm on 227 00:08:33,630 --> 00:08:35,729 a Mac so I would choose Mac and download 228 00:08:35,729 --> 00:08:37,589 the zip file and what that's going to 229 00:08:37,589 --> 00:08:40,380 give you is a is the SDK it's gonna be a 230 00:08:40,380 --> 00:08:42,449 folder called flutter and you need to 231 00:08:42,449 --> 00:08:44,010 put that somewhere on your system 232 00:08:44,010 --> 00:08:47,100 alright so for instance for me I have 233 00:08:47,100 --> 00:08:49,649 mine in my home directory so this is my 234 00:08:49,649 --> 00:08:50,100 home 235 00:08:50,100 --> 00:08:52,949 users slash Brad traversée and then in a 236 00:08:52,949 --> 00:08:55,259 folder called utils that's where I put 237 00:08:55,259 --> 00:08:59,009 that flutter folder now once you put the 238 00:08:59,009 --> 00:09:01,589 SDK somewhere on your machine you want 239 00:09:01,589 --> 00:09:04,709 to create a path okay and on Windows I 240 00:09:04,709 --> 00:09:07,350 don't think it shows you how to do it 241 00:09:07,350 --> 00:09:09,089 but it's just like if you were to add a 242 00:09:09,089 --> 00:09:11,610 path for anything else yeah you need to 243 00:09:11,610 --> 00:09:13,740 add your environment variables which I 244 00:09:13,740 --> 00:09:14,910 can't show you because I'm not on 245 00:09:14,910 --> 00:09:16,680 Windows however if you're on Mac what 246 00:09:16,680 --> 00:09:19,440 you would do is go to your bash profile 247 00:09:19,440 --> 00:09:21,509 which should be in your home directory 248 00:09:21,509 --> 00:09:24,149 although it's hidden in on Mac if you 249 00:09:24,149 --> 00:09:26,639 want to see excuse me hidden files and 250 00:09:26,639 --> 00:09:29,100 folders you can do command shift period 251 00:09:29,100 --> 00:09:32,100 and it'll show all of you are hidden 252 00:09:32,100 --> 00:09:34,829 files okay and just gonna organize this 253 00:09:34,829 --> 00:09:39,540 and right here is my bash profile now if 254 00:09:39,540 --> 00:09:41,279 you don't see this if you don't have 255 00:09:41,279 --> 00:09:42,990 this on your machine you can create it 256 00:09:42,990 --> 00:09:46,259 by going to your home directory which 257 00:09:46,259 --> 00:09:48,709 I'm currently in and then you can just 258 00:09:48,709 --> 00:09:51,329 use the touch command to create the file 259 00:09:51,329 --> 00:09:54,360 and you can say I've got brash bash 260 00:09:54,360 --> 00:09:58,649 underscore I'm sorry dot bash underscore 261 00:09:58,649 --> 00:10:01,110 profile and you can create it okay if 262 00:10:01,110 --> 00:10:03,600 you don't have it and then you just want 263 00:10:03,600 --> 00:10:06,149 to edit that so I'm going to just go 264 00:10:06,149 --> 00:10:08,759 ahead and open it with TextEdit and you 265 00:10:08,759 --> 00:10:11,550 want to add your path to your flutter 266 00:10:11,550 --> 00:10:13,740 SDK so I make this a little bigger and 267 00:10:13,740 --> 00:10:15,540 this is the line that you want to look 268 00:10:15,540 --> 00:10:17,519 at this is what you want to add so you 269 00:10:17,519 --> 00:10:20,130 want to add export path equals money 270 00:10:20,130 --> 00:10:23,250 sign path colon and then the location of 271 00:10:23,250 --> 00:10:26,850 your the bin folder inside the flutter 272 00:10:26,850 --> 00:10:29,939 folder which for me is in my users Brad 273 00:10:29,939 --> 00:10:33,149 Travis e utils flutter bin okay 274 00:10:33,149 --> 00:10:35,490 obviously your path will be different so 275 00:10:35,490 --> 00:10:37,290 once you add that and you save this file 276 00:10:37,290 --> 00:10:39,839 you can restart your terminal and then 277 00:10:39,839 --> 00:10:42,889 you should be able to run the flutter 278 00:10:42,889 --> 00:10:45,509 doctor command and what that's going to 279 00:10:45,509 --> 00:10:48,959 do is give you a summary of kind of your 280 00:10:48,959 --> 00:10:51,060 dependencies and what you have installed 281 00:10:51,060 --> 00:10:53,310 and and what you need you can see I have 282 00:10:53,310 --> 00:10:55,050 all green checks here but you may have 283 00:10:55,050 --> 00:10:57,689 some red X's so we have flutter we have 284 00:10:57,689 --> 00:11:02,430 the android plug-in Xcode which I have 285 00:11:02,430 --> 00:11:03,720 installed you 286 00:11:03,720 --> 00:11:05,310 the latest version of Xcode if you're on 287 00:11:05,310 --> 00:11:08,550 a Mac Android studio and the vs code 288 00:11:08,550 --> 00:11:10,050 extension so I have all this stuff 289 00:11:10,050 --> 00:11:12,029 installed however you may have some red 290 00:11:12,029 --> 00:11:14,160 X's and you need to take care of that 291 00:11:14,160 --> 00:11:16,860 all right so we're gonna move on to what 292 00:11:16,860 --> 00:11:19,920 else is required so we're at this point 293 00:11:19,920 --> 00:11:22,709 right here now if you're on Mac you want 294 00:11:22,709 --> 00:11:24,870 to have the latest version of Xcode I'd 295 00:11:24,870 --> 00:11:26,850 suggest getting it from the App Store so 296 00:11:26,850 --> 00:11:28,980 if you just open up the app store and 297 00:11:28,980 --> 00:11:32,430 search for Xcode you want this right 298 00:11:32,430 --> 00:11:35,009 here okay you want to grab that and then 299 00:11:35,009 --> 00:11:37,949 you want to run these two commands right 300 00:11:37,949 --> 00:11:42,680 here this is also in the docs or is it 301 00:11:42,680 --> 00:11:44,189 right here 302 00:11:44,189 --> 00:11:46,709 okay so just run both of these commands 303 00:11:46,709 --> 00:11:50,279 and that's to configure the Xcode 304 00:11:50,279 --> 00:11:52,680 command-line tools to the newly 305 00:11:52,680 --> 00:11:55,470 installed version of Xcode so run those 306 00:11:55,470 --> 00:11:57,750 and this is and this is only on Mac 307 00:11:57,750 --> 00:11:59,759 obviously and then once you do that you 308 00:11:59,759 --> 00:12:01,829 should be able to run your iOS simulator 309 00:12:01,829 --> 00:12:04,319 so let's try that out we'll go ahead and 310 00:12:04,319 --> 00:12:09,899 run open - a simulator and there we go 311 00:12:09,899 --> 00:12:12,569 so we get an iPhone 11 Pro max right on 312 00:12:12,569 --> 00:12:14,430 our desktop and this is actually what 313 00:12:14,430 --> 00:12:17,430 we'll be using to look at and test our 314 00:12:17,430 --> 00:12:19,620 application okay but I'm gonna close 315 00:12:19,620 --> 00:12:23,040 that for now so at this point if you're 316 00:12:23,040 --> 00:12:24,720 on a Mac you should have Xcode installed 317 00:12:24,720 --> 00:12:25,949 and you should be able to run the 318 00:12:25,949 --> 00:12:27,779 simulator now you want to install 319 00:12:27,779 --> 00:12:29,730 Android studio so this is for the 320 00:12:29,730 --> 00:12:32,759 Android apps and on Windows this is 321 00:12:32,759 --> 00:12:35,819 required so make sure that you know if 322 00:12:35,819 --> 00:12:37,529 you're on Windows you install this you 323 00:12:37,529 --> 00:12:38,519 can get it from here 324 00:12:38,519 --> 00:12:40,649 just go ahead and download it install it 325 00:12:40,649 --> 00:12:43,439 and then you want to install the flutter 326 00:12:43,439 --> 00:12:46,290 plugin in Android studio so I'm gonna go 327 00:12:46,290 --> 00:12:47,699 ahead and just show you how to do that 328 00:12:47,699 --> 00:12:49,680 real quick I'm just going to open up 329 00:12:49,680 --> 00:12:52,920 Android studio and from here you want to 330 00:12:52,920 --> 00:12:57,689 go to configure and then plugins okay 331 00:12:57,689 --> 00:13:01,820 and then just search for flutter 332 00:13:01,830 --> 00:13:03,779 and right here you can see there's a 333 00:13:03,779 --> 00:13:05,459 flutter plug-in and I already have it 334 00:13:05,459 --> 00:13:06,690 installed so you just want to click 335 00:13:06,690 --> 00:13:09,450 install all right once you do that you 336 00:13:09,450 --> 00:13:11,670 want to create a virtual device so you 337 00:13:11,670 --> 00:13:14,640 go to configure AVD manager which is the 338 00:13:14,640 --> 00:13:16,980 Android virtual device manager and you 339 00:13:16,980 --> 00:13:18,990 can see I already have a pixel to set up 340 00:13:18,990 --> 00:13:22,079 here so what you want to do if you don't 341 00:13:22,079 --> 00:13:24,089 have any setup already is just create 342 00:13:24,089 --> 00:13:26,339 new virtual device you can choose from a 343 00:13:26,339 --> 00:13:28,740 bunch of different devices I just go 344 00:13:28,740 --> 00:13:31,079 with the default pixel too and then just 345 00:13:31,079 --> 00:13:33,329 go through click Next and create a new 346 00:13:33,329 --> 00:13:35,339 device and then once you do that you can 347 00:13:35,339 --> 00:13:37,350 quick click Play and it should launch 348 00:13:37,350 --> 00:13:39,959 the emulator alright so now you have an 349 00:13:39,959 --> 00:13:41,550 Android device and if you're on Windows 350 00:13:41,550 --> 00:13:44,880 this is what you'll be using to to view 351 00:13:44,880 --> 00:13:48,089 and test your flutter application ok but 352 00:13:48,089 --> 00:13:49,620 I'm going to go ahead and just quit out 353 00:13:49,620 --> 00:13:53,279 of that ok so we have that set up and 354 00:13:53,279 --> 00:13:55,019 that's pretty much it now you just need 355 00:13:55,019 --> 00:13:57,060 to install the vs code extension but I'm 356 00:13:57,060 --> 00:13:58,350 going to do that after we actually 357 00:13:58,350 --> 00:14:01,230 create our flutter app so to create an 358 00:14:01,230 --> 00:14:03,690 app we can just run flutter create and 359 00:14:03,690 --> 00:14:04,980 then whatever we want to call our 360 00:14:04,980 --> 00:14:09,120 application so I'm gonna go into my dev 361 00:14:09,120 --> 00:14:10,529 folder where I want to create my 362 00:14:10,529 --> 00:14:14,670 application and run flutter create and 363 00:14:14,670 --> 00:14:18,980 let's call this word pair underscore 364 00:14:18,980 --> 00:14:22,020 generator and that will generate our 365 00:14:22,020 --> 00:14:26,850 application ok so now I'm just gonna CD 366 00:14:26,850 --> 00:14:29,040 into word pair generator and I'm gonna 367 00:14:29,040 --> 00:14:33,390 open it up with vs code and obviously 368 00:14:33,390 --> 00:14:35,100 you don't have to use vs code you could 369 00:14:35,100 --> 00:14:37,760 use like Android studio or some other 370 00:14:37,760 --> 00:14:41,520 text editor IDE but if you install the 371 00:14:41,520 --> 00:14:46,110 flutter extension so I already have it 372 00:14:46,110 --> 00:14:48,959 installed looks like there's a reload 373 00:14:48,959 --> 00:14:54,000 required no go ahead and do that dart 374 00:14:54,000 --> 00:14:57,089 has been updated ok so I just want to 375 00:14:57,089 --> 00:14:59,640 show you real quick the extension where 376 00:14:59,640 --> 00:15:04,459 to go so it installs the dart extension 377 00:15:04,459 --> 00:15:07,019 or maybe it doesn't maybe you need to 378 00:15:07,019 --> 00:15:08,699 install that just make sure you have 379 00:15:08,699 --> 00:15:11,029 both the flutter and the dart extension 380 00:15:11,029 --> 00:15:13,199 yeah but this so this is the flutter 381 00:15:13,199 --> 00:15:17,070 extension and it'll allow us to have a 382 00:15:17,070 --> 00:15:21,120 really nice workflow - - with hot reload 383 00:15:21,120 --> 00:15:25,790 and all that stuff and then the dart 384 00:15:25,790 --> 00:15:28,589 right here dart language support so this 385 00:15:28,589 --> 00:15:32,420 will give you like code highlighting 386 00:15:32,420 --> 00:15:35,100 snippets stuff like that so just make 387 00:15:35,100 --> 00:15:37,170 sure you have those two installed all 388 00:15:37,170 --> 00:15:39,300 right so now we're ready to get started 389 00:15:39,300 --> 00:15:40,680 so you can see we have all the files 390 00:15:40,680 --> 00:15:43,680 over here that were generated and in 391 00:15:43,680 --> 00:15:46,560 order to run this what we can do is go 392 00:15:46,560 --> 00:15:49,079 down here you see this no device so if I 393 00:15:49,079 --> 00:15:52,020 click that I now have the option to use 394 00:15:52,020 --> 00:15:55,170 either my pixel - Android device or my 395 00:15:55,170 --> 00:15:57,449 iOS simulator I'm gonna use my iOS 396 00:15:57,449 --> 00:16:01,410 simulator and it's gonna open up it's 397 00:16:01,410 --> 00:16:03,149 not gonna run the app just yet but it 398 00:16:03,149 --> 00:16:05,579 will open the simulator and I'm just 399 00:16:05,579 --> 00:16:08,220 gonna make this a little smaller so we 400 00:16:08,220 --> 00:16:11,100 can see both at the same time you can 401 00:16:11,100 --> 00:16:14,550 minimize this and to run this all we 402 00:16:14,550 --> 00:16:16,589 have to do is go up to the menu which is 403 00:16:16,589 --> 00:16:18,300 you guys can't see it's off the screen 404 00:16:18,300 --> 00:16:22,110 but if you go to debug and then start 405 00:16:22,110 --> 00:16:25,350 debugging and choose your environment 406 00:16:25,350 --> 00:16:27,360 which is gonna be dart and flutter it 407 00:16:27,360 --> 00:16:32,790 should launch your application so we 408 00:16:32,790 --> 00:16:34,350 have a really nice workflow I'm just 409 00:16:34,350 --> 00:16:35,850 gonna close this up we don't need that 410 00:16:35,850 --> 00:16:41,960 anymore 411 00:16:41,970 --> 00:16:44,620 and this will make it so that one when 412 00:16:44,620 --> 00:16:47,380 we save our files it'll auto reload and 413 00:16:47,380 --> 00:16:53,320 it's just a really nice workflow okay so 414 00:16:53,320 --> 00:16:55,750 what this will do is load the basically 415 00:16:55,750 --> 00:16:58,269 just the boilerplate app so we have just 416 00:16:58,269 --> 00:17:00,610 an app bar up here we have this you have 417 00:17:00,610 --> 00:17:02,589 pushed the button this many times with a 418 00:17:02,589 --> 00:17:04,480 zero and then we have a floating button 419 00:17:04,480 --> 00:17:06,550 down here and if I click it it'll just 420 00:17:06,550 --> 00:17:08,949 increment the number by one so this is 421 00:17:08,949 --> 00:17:11,559 just the little default application that 422 00:17:11,559 --> 00:17:13,929 they give you but our app is running so 423 00:17:13,929 --> 00:17:15,520 if we look over here you can see our 424 00:17:15,520 --> 00:17:17,890 files now as far as the file structure 425 00:17:17,890 --> 00:17:20,770 the only thing the only place that we 426 00:17:20,770 --> 00:17:22,689 really need to worry about right now is 427 00:17:22,689 --> 00:17:25,420 the Lib folder this is where all of our 428 00:17:25,420 --> 00:17:27,160 code is gonna go you can see there's a 429 00:17:27,160 --> 00:17:30,100 main dot dart file and this is what is 430 00:17:30,100 --> 00:17:32,559 running the app this is the the main 431 00:17:32,559 --> 00:17:35,040 source code now this may look a little 432 00:17:35,040 --> 00:17:38,370 intimidating but it's it's like 85% 433 00:17:38,370 --> 00:17:41,410 comments so don't get too intimidated by 434 00:17:41,410 --> 00:17:42,970 it but basically I mean I'm not gonna go 435 00:17:42,970 --> 00:17:45,070 through all the code but we're importing 436 00:17:45,070 --> 00:17:48,820 material design and every dart 437 00:17:48,820 --> 00:17:51,130 application is gonna have this main 438 00:17:51,130 --> 00:17:53,590 function okay so void main void just 439 00:17:53,590 --> 00:17:55,270 means that nothing is returned from it 440 00:17:55,270 --> 00:17:57,700 and then here we're using an arrow you 441 00:17:57,700 --> 00:17:59,800 can use basically arrow functions in 442 00:17:59,800 --> 00:18:01,419 Dart similar to JavaScript arrow 443 00:18:01,419 --> 00:18:03,160 functions and then we're just calling 444 00:18:03,160 --> 00:18:06,190 run app and we're initializing this my 445 00:18:06,190 --> 00:18:08,440 app which we actually have defined right 446 00:18:08,440 --> 00:18:11,500 here as a stateless widget okay we have 447 00:18:11,500 --> 00:18:13,660 our build command in here I'm sorry a 448 00:18:13,660 --> 00:18:16,120 build method and from there we're 449 00:18:16,120 --> 00:18:18,640 returning material app which allows us 450 00:18:18,640 --> 00:18:21,970 to use material design widgets okay we 451 00:18:21,970 --> 00:18:24,970 can do things like set theme data and 452 00:18:24,970 --> 00:18:27,580 then down here we have a home property 453 00:18:27,580 --> 00:18:30,820 which is equal to a custom widget called 454 00:18:30,820 --> 00:18:32,800 my home page and then they proceeded to 455 00:18:32,800 --> 00:18:34,780 create a stateful widget alright but I'm 456 00:18:34,780 --> 00:18:36,190 not gonna go through all this I'm just 457 00:18:36,190 --> 00:18:38,020 gonna get rid of everything actually and 458 00:18:38,020 --> 00:18:39,940 we're gonna start fresh so first thing 459 00:18:39,940 --> 00:18:41,230 we're gonna do since we want to use 460 00:18:41,230 --> 00:18:44,559 material design is import that from 461 00:18:44,559 --> 00:18:49,600 package colon flutter slash material dot 462 00:18:49,600 --> 00:18:50,169 Dart 463 00:18:50,169 --> 00:18:52,480 okay so this allows to use material 464 00:18:52,480 --> 00:18:55,120 design now like I said every dart Apple 465 00:18:55,120 --> 00:18:57,580 has a main function which is basically 466 00:18:57,580 --> 00:18:59,620 like an entry point so we're gonna say 467 00:18:59,620 --> 00:19:01,330 void because it doesn't return anything 468 00:19:01,330 --> 00:19:03,940 main and then we can use an arrow for an 469 00:19:03,940 --> 00:19:07,390 arrow here because it's just a 1 a 470 00:19:07,390 --> 00:19:10,030 one-line function and we're just calling 471 00:19:10,030 --> 00:19:13,570 run app okay and then in here 472 00:19:13,570 --> 00:19:16,480 we could actually pass in directly the 473 00:19:16,480 --> 00:19:19,630 material app like that however I think 474 00:19:19,630 --> 00:19:23,650 it's neither to create basically like a 475 00:19:23,650 --> 00:19:26,890 core or root widget which we'll call my 476 00:19:26,890 --> 00:19:29,620 app like that and then we'll define that 477 00:19:29,620 --> 00:19:33,370 by saying class my app and that's gonna 478 00:19:33,370 --> 00:19:37,540 extends not sextants extends the 479 00:19:37,540 --> 00:19:43,570 stateless stateless widget class okay 480 00:19:43,570 --> 00:19:46,750 and then in here we need to run our 481 00:19:46,750 --> 00:19:48,760 build method or I should say override 482 00:19:48,760 --> 00:19:50,890 our build method because the stateless 483 00:19:50,890 --> 00:19:54,010 widget class has a build method and when 484 00:19:54,010 --> 00:19:56,370 we do this typically you'll see this at 485 00:19:56,370 --> 00:19:59,080 override like that which isn't required 486 00:19:59,080 --> 00:20:01,120 but it's just more readable and it shows 487 00:20:01,120 --> 00:20:02,679 you that you're actually overriding a 488 00:20:02,679 --> 00:20:06,330 method and then we'll say widget build 489 00:20:06,330 --> 00:20:09,400 okay and then every build method has a 490 00:20:09,400 --> 00:20:12,670 build context passed into it so build 491 00:20:12,670 --> 00:20:16,000 context and then context and then from 492 00:20:16,000 --> 00:20:18,040 here we're gonna go ahead and return our 493 00:20:18,040 --> 00:20:24,010 material app all right now just to show 494 00:20:24,010 --> 00:20:26,559 you real quick if we go to the docs 495 00:20:26,559 --> 00:20:32,150 let's search for flutter or material 496 00:20:32,160 --> 00:20:36,100 okay so the material app class which is 497 00:20:36,100 --> 00:20:38,200 an application that uses material design 498 00:20:38,200 --> 00:20:40,270 it's a convenience widget that wraps a 499 00:20:40,270 --> 00:20:41,830 number of widgets that are commonly 500 00:20:41,830 --> 00:20:43,860 required for material design 501 00:20:43,860 --> 00:20:46,780 applications so you can see right here 502 00:20:46,780 --> 00:20:49,870 material app and then there's a whole 503 00:20:49,870 --> 00:20:51,130 there's a lot of different properties 504 00:20:51,130 --> 00:20:53,770 you can use but home is basically what's 505 00:20:53,770 --> 00:20:58,270 going to show on in the UI and typically 506 00:20:58,270 --> 00:21:00,160 what you'll do is use the scaffold 507 00:21:00,160 --> 00:21:02,140 widget okay so if we want to look at 508 00:21:02,140 --> 00:21:05,420 that say flutters 509 00:21:05,420 --> 00:21:11,090 scaffold so scaffold is basically a high 510 00:21:11,090 --> 00:21:15,560 level widget where you can have multiple 511 00:21:15,560 --> 00:21:18,230 lower level widgets inside and there's 512 00:21:18,230 --> 00:21:19,760 different properties like for the app 513 00:21:19,760 --> 00:21:22,160 bar you use the app bar widget in the 514 00:21:22,160 --> 00:21:23,870 body you can use whatever widgets you 515 00:21:23,870 --> 00:21:25,610 want in this case we're using the center 516 00:21:25,610 --> 00:21:27,590 widget you can have the you know buttons 517 00:21:27,590 --> 00:21:30,260 this is a floating action button so 518 00:21:30,260 --> 00:21:32,390 before we get into scaffold I just want 519 00:21:32,390 --> 00:21:35,480 to get something up on the page so I'm 520 00:21:35,480 --> 00:21:37,760 actually going to say for home we'll 521 00:21:37,760 --> 00:21:39,980 just use a text widget and if I hover 522 00:21:39,980 --> 00:21:42,410 over this if you hover over any widgets 523 00:21:42,410 --> 00:21:44,090 it'll tell you exactly what it is so 524 00:21:44,090 --> 00:21:46,790 this just creates a text widget it can 525 00:21:46,790 --> 00:21:49,070 also take in a style property and you 526 00:21:49,070 --> 00:21:50,990 can use what's called a text style 527 00:21:50,990 --> 00:21:53,330 widget so I'll show you that as well so 528 00:21:53,330 --> 00:21:57,820 in here we'll just say hello world and 529 00:21:57,820 --> 00:22:01,190 save it and this should actually run so 530 00:22:01,190 --> 00:22:03,500 let's minimize this and that's what we 531 00:22:03,500 --> 00:22:06,170 get which is very ugly kind of the 532 00:22:06,170 --> 00:22:08,900 default look if we want to we can add in 533 00:22:08,900 --> 00:22:11,390 a style property here and we can use a 534 00:22:11,390 --> 00:22:15,740 text style widget and what this takes in 535 00:22:15,740 --> 00:22:18,350 is a bunch of properties for instance if 536 00:22:18,350 --> 00:22:23,090 we want to do font size we could say I 537 00:22:23,090 --> 00:22:27,010 don't know 30 let's do 30 point five and 538 00:22:27,010 --> 00:22:33,200 for color we could say colors dot and 539 00:22:33,200 --> 00:22:35,360 then we can use any material design 540 00:22:35,360 --> 00:22:37,520 colors so for instance we'll say green 541 00:22:37,520 --> 00:22:41,300 and if I hover over this I believe I 542 00:22:41,300 --> 00:22:44,300 don't yep so if I hover over this we'll 543 00:22:44,300 --> 00:22:46,250 see some options here for different 544 00:22:46,250 --> 00:22:49,130 shades of green so let's say we want 545 00:22:49,130 --> 00:22:51,400 this right here we could use green 546 00:22:51,400 --> 00:22:55,430 brackets 400 for our color so let's go 547 00:22:55,430 --> 00:22:57,890 ahead and save that and there we go okay 548 00:22:57,890 --> 00:23:00,200 so what we have here is just our main 549 00:23:00,200 --> 00:23:03,890 widget which is using material app which 550 00:23:03,890 --> 00:23:05,720 is just showing a text widget with the 551 00:23:05,720 --> 00:23:07,850 text hello world and then we're using a 552 00:23:07,850 --> 00:23:10,580 text style widget to add some style to 553 00:23:10,580 --> 00:23:12,700 that which still looks incredibly ugly 554 00:23:12,700 --> 00:23:15,440 okay now I don't want to use a text 555 00:23:15,440 --> 00:23:16,880 widget I just wanted to give you a quick 556 00:23:16,880 --> 00:23:18,650 example so I'm going to go 557 00:23:18,650 --> 00:23:24,160 head and get rid of this so we just have 558 00:23:24,160 --> 00:23:26,870 our home property and from here we're 559 00:23:26,870 --> 00:23:30,950 going to use scaffold all right and in 560 00:23:30,950 --> 00:23:35,000 scaffold we can set an app bar property 561 00:23:35,000 --> 00:23:37,870 and we're going to use an app bar widget 562 00:23:37,870 --> 00:23:41,150 okay now the app bar widget takes in a 563 00:23:41,150 --> 00:23:46,040 title and for that title we can't just 564 00:23:46,040 --> 00:23:50,960 put a string like we can't say it's a 565 00:23:50,960 --> 00:23:54,650 word pair generator so obviously I mean 566 00:23:54,650 --> 00:23:56,600 this is giving us an error here 567 00:23:56,600 --> 00:23:58,580 so string can't be assigned to the 568 00:23:58,580 --> 00:24:00,320 parameter type it has to be a widget so 569 00:24:00,320 --> 00:24:02,000 we're gonna use a text widget so we'll 570 00:24:02,000 --> 00:24:06,200 wrap this in text like that and that 571 00:24:06,200 --> 00:24:08,540 should be good so if we go ahead and 572 00:24:08,540 --> 00:24:10,820 save that there we go so we have our app 573 00:24:10,820 --> 00:24:16,970 bar so in addition to app bar actually I 574 00:24:16,970 --> 00:24:18,740 want to show you how we can set the 575 00:24:18,740 --> 00:24:20,930 theme so another property that we can 576 00:24:20,930 --> 00:24:22,790 have in here I really don't like how vs 577 00:24:22,790 --> 00:24:25,040 code formats this but I guess we'll deal 578 00:24:25,040 --> 00:24:29,120 with it so we can set theme and we have 579 00:24:29,120 --> 00:24:34,280 a theme data widget we can use and let's 580 00:24:34,280 --> 00:24:36,800 put in here we'll use primary color so 581 00:24:36,800 --> 00:24:38,540 if we want to set the primary color we 582 00:24:38,540 --> 00:24:41,930 can use colors dot and let's use we'll 583 00:24:41,930 --> 00:24:46,750 use purple and let's see we'll do like I 584 00:24:46,750 --> 00:24:49,370 guess just purple but you can change the 585 00:24:49,370 --> 00:24:52,190 shade if you want any of these actually 586 00:24:52,190 --> 00:24:54,770 I kind of like purple 900 let's do that 587 00:24:54,770 --> 00:25:00,520 so brackets 900 and we'll save 588 00:25:00,530 --> 00:25:03,350 what did I do wrong here home scaffold 589 00:25:03,350 --> 00:25:05,150 oh I'm sorry theme does not go in 590 00:25:05,150 --> 00:25:07,070 scaffold it goes in material app 591 00:25:07,070 --> 00:25:11,320 directly so we want to put that here 592 00:25:11,320 --> 00:25:14,330 there we go okay so now you can see that 593 00:25:14,330 --> 00:25:16,880 the app bar has changed to that deep 594 00:25:16,880 --> 00:25:20,960 purple so for the body here obviously we 595 00:25:20,960 --> 00:25:23,450 want to put stuff here so inside the 596 00:25:23,450 --> 00:25:25,940 scaffold in addition to app bar we're 597 00:25:25,940 --> 00:25:29,690 gonna have our home property and for now 598 00:25:29,690 --> 00:25:32,780 I'm going to use a center widget okay 599 00:25:32,780 --> 00:25:34,460 and if we hover over this it'll tell us 600 00:25:34,460 --> 00:25:36,680 that it creates a widget that centers 601 00:25:36,680 --> 00:25:39,410 its child so basically you have a child 602 00:25:39,410 --> 00:25:42,170 Widgit in here so we can say give it a 603 00:25:42,170 --> 00:25:45,200 property of child and let's just set 604 00:25:45,200 --> 00:25:51,950 that to text and we'll just say hello 605 00:25:51,950 --> 00:25:58,750 world let's see why am I getting this so 606 00:25:58,750 --> 00:26:02,600 I put home sorry this should be body so 607 00:26:02,600 --> 00:26:05,570 scaffold takes in body not home home is 608 00:26:05,570 --> 00:26:09,170 for the material app widget so there we 609 00:26:09,170 --> 00:26:11,690 go we have hello world so I mean this 610 00:26:11,690 --> 00:26:13,340 this kind of gives you an idea of how 611 00:26:13,340 --> 00:26:15,770 you build up your UI it's just it's 612 00:26:15,770 --> 00:26:17,750 basically it's a widget tree is what it 613 00:26:17,750 --> 00:26:20,480 is what I want to do now is look at 614 00:26:20,480 --> 00:26:22,700 packages because we're gonna use a 615 00:26:22,700 --> 00:26:25,010 package called English words and that's 616 00:26:25,010 --> 00:26:26,480 going to give us the the core 617 00:26:26,480 --> 00:26:28,820 functionality of generating these word 618 00:26:28,820 --> 00:26:31,610 pairs so if I go to my browser and we go 619 00:26:31,610 --> 00:26:36,500 to its pub dot dev this is dart packages 620 00:26:36,500 --> 00:26:41,870 and just like you have you know NPM for 621 00:26:41,870 --> 00:26:42,950 nodejs 622 00:26:42,950 --> 00:26:45,140 you know you have all your you have 623 00:26:45,140 --> 00:26:47,300 packages in just about every language so 624 00:26:47,300 --> 00:26:49,310 dart has its own packages and we're 625 00:26:49,310 --> 00:26:52,400 going to use English words which is 626 00:26:52,400 --> 00:26:54,140 right here and this is a package 627 00:26:54,140 --> 00:26:56,420 containing whatever five thousand used 628 00:26:56,420 --> 00:26:58,670 English words and some utility functions 629 00:26:58,670 --> 00:27:00,620 and it just kind of gives you some 630 00:27:00,620 --> 00:27:03,710 information now to install packages we 631 00:27:03,710 --> 00:27:06,020 want to add it to our dependencies in 632 00:27:06,020 --> 00:27:08,960 our pub spec file our pub spec dot yeah 633 00:27:08,960 --> 00:27:09,510 MOFA 634 00:27:09,510 --> 00:27:12,660 so we want to take the dependency I'll 635 00:27:12,660 --> 00:27:19,140 just grab this and go back to our turn 636 00:27:19,140 --> 00:27:22,559 our editor here and go into our pub spec 637 00:27:22,559 --> 00:27:26,309 yeah mol file and you'll see that we 638 00:27:26,309 --> 00:27:28,350 have our dependencies here so we have 639 00:27:28,350 --> 00:27:31,049 the flutter SDK we have this coppertino 640 00:27:31,049 --> 00:27:33,630 icons which is included by default what 641 00:27:33,630 --> 00:27:34,919 we'll actually be using those in a 642 00:27:34,919 --> 00:27:36,929 little bit and then we want to put our 643 00:27:36,929 --> 00:27:39,830 English words okay we actually want it 644 00:27:39,830 --> 00:27:41,900 at this level 645 00:27:41,900 --> 00:27:45,000 okay so we'll save that and then to 646 00:27:45,000 --> 00:27:46,919 install this actually it installs it 647 00:27:46,919 --> 00:27:49,890 automatically with with how we have 648 00:27:49,890 --> 00:27:52,080 everything set up so we should be able 649 00:27:52,080 --> 00:27:54,870 to use it but if you don't have you know 650 00:27:54,870 --> 00:27:57,200 if you're not running the flutter 651 00:27:57,200 --> 00:27:59,549 extension and the debugger and so on 652 00:27:59,549 --> 00:28:01,830 then you have to run pub get or flutter 653 00:28:01,830 --> 00:28:05,850 pub get which is like an NPM install all 654 00:28:05,850 --> 00:28:10,140 right so let's minimize this and then we 655 00:28:10,140 --> 00:28:12,630 can close this file and from here we're 656 00:28:12,630 --> 00:28:15,660 gonna import our English words package 657 00:28:15,660 --> 00:28:18,630 so we can say import package colon and 658 00:28:18,630 --> 00:28:20,490 then the name of the package which is 659 00:28:20,490 --> 00:28:23,700 English words and then it's gonna be 660 00:28:23,700 --> 00:28:26,700 English words dot dart 661 00:28:26,700 --> 00:28:29,130 ok so that'll bring the package in and 662 00:28:29,130 --> 00:28:30,720 we just have this blue line because it's 663 00:28:30,720 --> 00:28:32,429 unused we haven't used it yet 664 00:28:32,429 --> 00:28:36,600 so down here in our build I'm gonna go 665 00:28:36,600 --> 00:28:39,870 ahead and create a variable now this 666 00:28:39,870 --> 00:28:41,520 variable is going to be a constant 667 00:28:41,520 --> 00:28:43,559 meaning that it can't be changed or I 668 00:28:43,559 --> 00:28:45,360 shouldn't say it can't be changed it 669 00:28:45,360 --> 00:28:48,390 can't be reassigned so I'm gonna use the 670 00:28:48,390 --> 00:28:50,910 final keyword here we're gonna say final 671 00:28:50,910 --> 00:28:54,330 and then we'll call this word pair okay 672 00:28:54,330 --> 00:28:57,360 now final is similar to Const in 673 00:28:57,360 --> 00:29:00,419 JavaScript so basically you can assign 674 00:29:00,419 --> 00:29:03,419 like a list which is similar to an array 675 00:29:03,419 --> 00:29:05,010 and then that and you can change the 676 00:29:05,010 --> 00:29:07,230 values you just can't directly reassign 677 00:29:07,230 --> 00:29:11,070 this variable and it can be something 678 00:29:11,070 --> 00:29:14,150 dynamic like let's say we wanted to use 679 00:29:14,150 --> 00:29:17,000 date/time dot now or something like that 680 00:29:17,000 --> 00:29:20,040 which this isn't going to be a static 681 00:29:20,040 --> 00:29:22,890 value that we always know so it's fine 682 00:29:22,890 --> 00:29:23,400 to do 683 00:29:23,400 --> 00:29:26,940 now there is a Const keyword as well but 684 00:29:26,940 --> 00:29:28,440 you don't want to use it with something 685 00:29:28,440 --> 00:29:29,880 like this in fact we're gonna get an 686 00:29:29,880 --> 00:29:33,300 error and you can see right here Kant's 687 00:29:33,300 --> 00:29:34,920 variables must be initialized with a 688 00:29:34,920 --> 00:29:37,470 constant value so basically when you 689 00:29:37,470 --> 00:29:40,170 know the value when you if you're always 690 00:29:40,170 --> 00:29:42,660 gonna know this value you can use Const 691 00:29:42,660 --> 00:29:45,510 but usually you're gonna use final okay 692 00:29:45,510 --> 00:29:47,850 if you're gonna use one at all and then 693 00:29:47,850 --> 00:29:49,290 we're gonna just check that's not what 694 00:29:49,290 --> 00:29:51,720 we want here what we want to do is use 695 00:29:51,720 --> 00:29:54,990 the word pair object which comes with 696 00:29:54,990 --> 00:29:56,940 the English words package and then 697 00:29:56,940 --> 00:29:58,710 there's some actually there's only one 698 00:29:58,710 --> 00:30:00,990 method I think on this called random and 699 00:30:00,990 --> 00:30:04,110 what that will do is it'll generate a 700 00:30:04,110 --> 00:30:06,450 random word pair in fact if I hover over 701 00:30:06,450 --> 00:30:09,360 it it'll tell us creates a single word 702 00:30:09,360 --> 00:30:14,520 pair randomly so for now down here let's 703 00:30:14,520 --> 00:30:17,040 just replace inside the text widget 704 00:30:17,040 --> 00:30:19,860 we'll replace this static string of 705 00:30:19,860 --> 00:30:22,410 hello world with our variable of word 706 00:30:22,410 --> 00:30:24,960 pair and then there's some methods 707 00:30:24,960 --> 00:30:27,270 attached to that to how we want it to be 708 00:30:27,270 --> 00:30:28,740 displayed we could do as lowercase 709 00:30:28,740 --> 00:30:31,679 Pascal case I'm going to use Pascal case 710 00:30:31,679 --> 00:30:34,200 which is it'll start with an upper case 711 00:30:34,200 --> 00:30:36,210 and then each word after that will start 712 00:30:36,210 --> 00:30:37,140 with an upper case 713 00:30:37,140 --> 00:30:39,600 okay so we'll save that and now you can 714 00:30:39,600 --> 00:30:41,490 see I get bunch beds so it's gonna 715 00:30:41,490 --> 00:30:43,650 create just a random word pair if I 716 00:30:43,650 --> 00:30:46,290 reload a Pierrot I click the reload icon 717 00:30:46,290 --> 00:30:49,830 we get on to cure click it again we get 718 00:30:49,830 --> 00:30:53,640 trunk rod so it just generates basically 719 00:30:53,640 --> 00:30:55,770 a single word pair now for this 720 00:30:55,770 --> 00:30:57,929 application we want a whole list of them 721 00:30:57,929 --> 00:31:01,200 in a ListView later on we're also going 722 00:31:01,200 --> 00:31:03,330 to be able to favorite a word pair and 723 00:31:03,330 --> 00:31:04,770 have a separate page where we can view 724 00:31:04,770 --> 00:31:09,200 our favorites so instead of for the home 725 00:31:09,200 --> 00:31:11,460 property right here in material app 726 00:31:11,460 --> 00:31:13,440 instead of just adding our scaffold here 727 00:31:13,440 --> 00:31:15,360 I'm gonna call a custom widget that 728 00:31:15,360 --> 00:31:17,179 we're gonna create called random words 729 00:31:17,179 --> 00:31:21,300 so let's see material app ends here 730 00:31:21,300 --> 00:31:26,550 so everything within this home property 731 00:31:26,550 --> 00:31:28,530 I'm going to just get rid of and we're 732 00:31:28,530 --> 00:31:32,370 gonna have this call random words which 733 00:31:32,370 --> 00:31:34,470 we haven't created yet so let's go down 734 00:31:34,470 --> 00:31:36,780 here and let's create a class 735 00:31:36,780 --> 00:31:40,169 called random words and this is gonna 736 00:31:40,169 --> 00:31:44,010 take care of the state so this is gonna 737 00:31:44,010 --> 00:31:47,159 override the create state so we need to 738 00:31:47,159 --> 00:31:53,340 extends state full widget and we're 739 00:31:53,340 --> 00:31:58,020 going to override and then we're gonna 740 00:31:58,020 --> 00:32:01,760 have another class called random words 741 00:32:01,760 --> 00:32:05,780 state and we're overriding create state 742 00:32:05,780 --> 00:32:12,770 and we're gonna call random words state 743 00:32:12,770 --> 00:32:15,630 okay and that's really all we have to do 744 00:32:15,630 --> 00:32:18,030 in this particular class so now we're 745 00:32:18,030 --> 00:32:21,179 gonna create the class random words 746 00:32:21,179 --> 00:32:23,130 State and this is where we handle all 747 00:32:23,130 --> 00:32:25,820 our UI stuff and this has to extends 748 00:32:25,820 --> 00:32:28,830 state and inside brackets we want to put 749 00:32:28,830 --> 00:32:34,020 our random words okay so this is where 750 00:32:34,020 --> 00:32:39,440 our build will go so it's a widget build 751 00:32:39,440 --> 00:32:46,470 takes a build context and let's return 752 00:32:46,470 --> 00:32:54,900 here a scaffold widget okay so within 753 00:32:54,900 --> 00:32:57,720 this scaffold we're gonna have our app 754 00:32:57,720 --> 00:32:59,460 bar because remember we took away the 755 00:32:59,460 --> 00:33:01,799 app bar and stuff up here we're calling 756 00:33:01,799 --> 00:33:04,350 random words directly for the home 757 00:33:04,350 --> 00:33:08,039 property so let's see we're gonna have 758 00:33:08,039 --> 00:33:11,549 our app bar which is obviously going to 759 00:33:11,549 --> 00:33:14,700 be an app bar widget which takes in a 760 00:33:14,700 --> 00:33:17,640 title property and for that title 761 00:33:17,640 --> 00:33:19,789 property we're gonna have a text widget 762 00:33:19,789 --> 00:33:28,190 and let's just say a word pair generator 763 00:33:28,200 --> 00:33:31,299 semicolon there all right so if I save 764 00:33:31,299 --> 00:33:33,730 this okay so it's still working we have 765 00:33:33,730 --> 00:33:42,010 our app bar so for the body just to test 766 00:33:42,010 --> 00:33:43,809 it out we'll just say we'll put a text 767 00:33:43,809 --> 00:33:47,650 widget here and say hello okay so we get 768 00:33:47,650 --> 00:33:49,450 hello obviously this isn't what we want 769 00:33:49,450 --> 00:33:51,220 what we want to have is what's called 770 00:33:51,220 --> 00:33:53,940 the ListView so I'm actually going to 771 00:33:53,940 --> 00:33:56,740 create a new widget that will hold our 772 00:33:56,740 --> 00:33:58,539 ListView so instead of that just this 773 00:33:58,539 --> 00:34:00,610 text widget of Hello inside the body 774 00:34:00,610 --> 00:34:05,080 let's say underscore build list and then 775 00:34:05,080 --> 00:34:07,270 we're gonna go above our build here and 776 00:34:07,270 --> 00:34:12,460 let's say widget underscore build list 777 00:34:12,460 --> 00:34:15,669 and then we want to have our ListView 778 00:34:15,669 --> 00:34:18,609 now I'm gonna just pull up the docs real 779 00:34:18,609 --> 00:34:24,340 quick so flutter ListView and a list 780 00:34:24,340 --> 00:34:25,990 view is the most commonly used scrolling 781 00:34:25,990 --> 00:34:27,760 widget it displays its children one 782 00:34:27,760 --> 00:34:30,250 after another in a scroll direction so 783 00:34:30,250 --> 00:34:33,429 something like this in this example it's 784 00:34:33,429 --> 00:34:36,190 a ListView and there's some padding so 785 00:34:36,190 --> 00:34:38,820 for padding we're using the edge in sets 786 00:34:38,820 --> 00:34:43,840 widget and we have a children property 787 00:34:43,840 --> 00:34:46,990 which just contains containers and 788 00:34:46,990 --> 00:34:49,419 inside the container we have some 789 00:34:49,419 --> 00:34:51,280 properties like height color and so on 790 00:34:51,280 --> 00:34:53,950 and then we have a center widget with a 791 00:34:53,950 --> 00:34:57,010 child widget of a text widget with entry 792 00:34:57,010 --> 00:34:58,810 a entry by entry see in fact we could 793 00:34:58,810 --> 00:35:04,330 grab this and we could go ahead and 794 00:35:04,330 --> 00:35:07,869 return paste that in just how to 795 00:35:07,869 --> 00:35:10,330 semicolon down here and then if we take 796 00:35:10,330 --> 00:35:14,260 a look at our app there we go so we just 797 00:35:14,260 --> 00:35:17,650 have basically a static ListView now we 798 00:35:17,650 --> 00:35:19,930 don't want this to be static we want 799 00:35:19,930 --> 00:35:23,530 this to be a dynamic list of random word 800 00:35:23,530 --> 00:35:26,740 pairs so in order to do that we're going 801 00:35:26,740 --> 00:35:29,710 to use the Builder method okay in fact 802 00:35:29,710 --> 00:35:34,210 if we look it's just search for a 803 00:35:34,210 --> 00:35:36,520 builder so right here we can use this 804 00:35:36,520 --> 00:35:39,010 dot builder and then we can have a 805 00:35:39,010 --> 00:35:40,869 property called item builder which is 806 00:35:40,869 --> 00:35:41,810 basically like an 807 00:35:41,810 --> 00:35:44,150 iterator okay it takes in the context 808 00:35:44,150 --> 00:35:47,000 and index and by the way you can use 809 00:35:47,000 --> 00:35:50,780 static types like this like int index so 810 00:35:50,780 --> 00:35:52,640 this has to be an int I haven't been 811 00:35:52,640 --> 00:35:53,810 doing that I probably should have 812 00:35:53,810 --> 00:35:56,600 mentioned that in the beginning but yeah 813 00:35:56,600 --> 00:35:58,940 you can you can add types to your 814 00:35:58,940 --> 00:36:01,430 variables and functions and stuff like 815 00:36:01,430 --> 00:36:03,920 that I just haven't been doing it so 816 00:36:03,920 --> 00:36:05,780 anyway this is what we're gonna do is 817 00:36:05,780 --> 00:36:08,540 turn this into a builder or use the 818 00:36:08,540 --> 00:36:11,180 Builder method so that we can use 819 00:36:11,180 --> 00:36:14,360 dynamic data but before we do that let's 820 00:36:14,360 --> 00:36:17,740 create a variable appear our property 821 00:36:17,740 --> 00:36:19,010 called 822 00:36:19,010 --> 00:36:24,020 random word pairs and we can get these 823 00:36:24,020 --> 00:36:26,660 generated using the English words 824 00:36:26,660 --> 00:36:28,550 package that we're using remember we 825 00:36:28,550 --> 00:36:35,480 used word pair up above up here which we 826 00:36:35,480 --> 00:36:36,980 don't even need this anymore I can get 827 00:36:36,980 --> 00:36:40,040 rid of this but we called this word pair 828 00:36:40,040 --> 00:36:43,760 random well we can actually get a list 829 00:36:43,760 --> 00:36:47,180 of word pairs by doing it this way okay 830 00:36:47,180 --> 00:36:48,980 we want to add just some brackets here 831 00:36:48,980 --> 00:36:50,960 which defines this is a list 832 00:36:50,960 --> 00:36:53,900 okay so representation of a combination 833 00:36:53,900 --> 00:36:57,200 of two words and then a list or urn 834 00:36:57,200 --> 00:37:00,650 array I guess arrays are called lists in 835 00:37:00,650 --> 00:37:01,510 Dart 836 00:37:01,510 --> 00:37:05,360 so that will generate the list now we 837 00:37:05,360 --> 00:37:07,400 want to iterate through that list and 838 00:37:07,400 --> 00:37:11,660 output list items okay list items of 839 00:37:11,660 --> 00:37:13,730 list tiles each one of these is actually 840 00:37:13,730 --> 00:37:17,870 called a tile list tile so padding let's 841 00:37:17,870 --> 00:37:19,490 see I'm going to actually change that to 842 00:37:19,490 --> 00:37:22,790 16 and then instead of children we're 843 00:37:22,790 --> 00:37:24,890 going to use that item builder property 844 00:37:24,890 --> 00:37:28,580 which is a function so item builder and 845 00:37:28,580 --> 00:37:30,530 then we can get rid of this widget and 846 00:37:30,530 --> 00:37:32,330 then everything within the brackets and 847 00:37:32,330 --> 00:37:35,620 the brackets themselves and let's say 848 00:37:35,620 --> 00:37:41,010 context and item 849 00:37:41,020 --> 00:37:44,660 okay so basically we're gonna iterate 850 00:37:44,660 --> 00:37:49,580 through the items now basically what we 851 00:37:49,580 --> 00:37:52,940 want to have is the word pair and then a 852 00:37:52,940 --> 00:37:55,370 divider and then word pair divider and 853 00:37:55,370 --> 00:37:58,280 so on so to do that we're just gonna do 854 00:37:58,280 --> 00:38:00,380 a quick if statement and see if the 855 00:38:00,380 --> 00:38:02,510 divider is odd there's a property called 856 00:38:02,510 --> 00:38:05,360 is odd and if that's true then we're 857 00:38:05,360 --> 00:38:07,600 going to return a material design 858 00:38:07,600 --> 00:38:11,570 divider okay and if we hover over that 859 00:38:11,570 --> 00:38:13,550 you'll see creates a material design 860 00:38:13,550 --> 00:38:15,590 divider you do have some stuff you can 861 00:38:15,590 --> 00:38:17,450 add to it like height and thickness and 862 00:38:17,450 --> 00:38:18,770 so on but we're just going to keep the 863 00:38:18,770 --> 00:38:21,800 default okay and then next thing we want 864 00:38:21,800 --> 00:38:24,800 to do is create our index so we're gonna 865 00:38:24,800 --> 00:38:29,150 say final index and we're gonna set this 866 00:38:29,150 --> 00:38:31,730 to our item and basically we want this 867 00:38:31,730 --> 00:38:33,740 to calculate the number of word pairs 868 00:38:33,740 --> 00:38:35,600 that are in the ListView minus the 869 00:38:35,600 --> 00:38:38,170 divider widgets and we do that like this 870 00:38:38,170 --> 00:38:41,870 okay so we don't want the dividers 871 00:38:41,870 --> 00:38:44,900 included here and then I want to be able 872 00:38:44,900 --> 00:38:48,170 to generate new word pairs as we scroll 873 00:38:48,170 --> 00:38:51,140 down so we'll just generate ten new word 874 00:38:51,140 --> 00:38:56,960 pairs so let's say if the index is 875 00:38:56,960 --> 00:39:00,740 greater than or equal to the random word 876 00:39:00,740 --> 00:39:03,350 pairs length just like in JavaScript we 877 00:39:03,350 --> 00:39:05,420 have a length property for lists or for 878 00:39:05,420 --> 00:39:08,210 a raise then we're gonna take random 879 00:39:08,210 --> 00:39:11,060 word pairs and we're gonna call a method 880 00:39:11,060 --> 00:39:11,420 called 881 00:39:11,420 --> 00:39:15,830 add all and inside at all we're gonna 882 00:39:15,830 --> 00:39:20,000 call a function called generate word 883 00:39:20,000 --> 00:39:22,670 pairs which is available because of that 884 00:39:22,670 --> 00:39:25,490 English words package that we're using 885 00:39:25,490 --> 00:39:27,650 and then we can add on to that a method 886 00:39:27,650 --> 00:39:29,810 called take so the and then the amount 887 00:39:29,810 --> 00:39:31,790 that we want to take our or create I 888 00:39:31,790 --> 00:39:38,480 guess which would be 10 okay 889 00:39:38,490 --> 00:39:41,849 let's see what's the problem here 890 00:39:41,849 --> 00:39:49,260 I mean a builder isn't defined oh I 891 00:39:49,260 --> 00:39:52,890 forgot to add dot builder so it 892 00:39:52,890 --> 00:39:54,480 shouldn't be just returned list view it 893 00:39:54,480 --> 00:39:56,550 should be list view dot builder which 894 00:39:56,550 --> 00:40:03,270 contains the item builder this function 895 00:40:03,270 --> 00:40:06,270 has a return type of divider yes so this 896 00:40:06,270 --> 00:40:08,580 item builder needs to actually return 897 00:40:08,580 --> 00:40:12,619 something and what we want to return is 898 00:40:12,619 --> 00:40:16,050 actually a list tile for each one okay 899 00:40:16,050 --> 00:40:18,690 each of those items is a list tile and 900 00:40:18,690 --> 00:40:20,369 I'm gonna put that in a separate widget 901 00:40:20,369 --> 00:40:24,660 called build row so inside the item 902 00:40:24,660 --> 00:40:27,060 builder at the very end we're gonna go 903 00:40:27,060 --> 00:40:31,200 ahead and return underscore build row 904 00:40:31,200 --> 00:40:33,780 and then we want to just pass in what we 905 00:40:33,780 --> 00:40:36,540 want each row to have which of course is 906 00:40:36,540 --> 00:40:38,339 going to be the random word pair so 907 00:40:38,339 --> 00:40:40,230 random word pairs and then the current 908 00:40:40,230 --> 00:40:43,500 index will get passed in okay and then 909 00:40:43,500 --> 00:40:45,710 we'll go right under that widget and 910 00:40:45,710 --> 00:40:55,970 create build row which takes in a pair 911 00:40:55,970 --> 00:41:00,030 okay and we can even add here word pair 912 00:41:00,030 --> 00:41:05,170 because that's what this is 913 00:41:05,180 --> 00:41:09,270 let's see yeah so widget build grow and 914 00:41:09,270 --> 00:41:12,620 then in here we're gonna return a list 915 00:41:12,620 --> 00:41:16,770 tile which is basically a row if we 916 00:41:16,770 --> 00:41:21,350 hover over this to see what it says 917 00:41:21,350 --> 00:41:23,820 doesn't give us much information create 918 00:41:23,820 --> 00:41:25,650 it's basically just one of the rows in 919 00:41:25,650 --> 00:41:28,380 the list view and then that takes in a 920 00:41:28,380 --> 00:41:30,150 widget or it takes in a property of 921 00:41:30,150 --> 00:41:32,430 title which we could add a text widget 922 00:41:32,430 --> 00:41:35,370 to and I could just say hello and if I 923 00:41:35,370 --> 00:41:42,690 save that we just get a ListView with a 924 00:41:42,690 --> 00:41:45,510 bunch of list tiles that say hello and 925 00:41:45,510 --> 00:41:47,850 you can see the divider between each one 926 00:41:47,850 --> 00:41:50,010 because we basically said if the item is 927 00:41:50,010 --> 00:41:53,730 odd then we want it to be a divider but 928 00:41:53,730 --> 00:41:55,440 obviously we don't want to say hello we 929 00:41:55,440 --> 00:41:57,420 want to pass in whatever the pair is 930 00:41:57,420 --> 00:41:59,220 it's being passed in right here 931 00:41:59,220 --> 00:42:02,040 okay the current index so we'll just go 932 00:42:02,040 --> 00:42:06,450 ahead and replace this with pair dot and 933 00:42:06,450 --> 00:42:08,850 then we want it to display as Pascal 934 00:42:08,850 --> 00:42:12,270 case and I just want to add some style I 935 00:42:12,270 --> 00:42:14,070 want to make it a little bigger so we'll 936 00:42:14,070 --> 00:42:18,860 say style and let's set that to a text 937 00:42:18,860 --> 00:42:24,930 style widget and we'll set the font size 938 00:42:24,930 --> 00:42:29,100 to 18 okay we'll save that and there we 939 00:42:29,100 --> 00:42:34,050 go so now we have ListView and in each 940 00:42:34,050 --> 00:42:37,350 list style widget we have a text widget 941 00:42:37,350 --> 00:42:41,280 that has the word pair okay random word 942 00:42:41,280 --> 00:42:43,650 pair and then for style we have a text 943 00:42:43,650 --> 00:42:45,240 style widget so you can see that a 944 00:42:45,240 --> 00:42:48,450 flutter app is just a bunch of widgets 945 00:42:48,450 --> 00:42:51,000 okay the UI is just a whole bunch of 946 00:42:51,000 --> 00:42:53,610 widgets and if I scroll it'll keep going 947 00:42:53,610 --> 00:42:56,040 and it'll keep generating new widgets 948 00:42:56,040 --> 00:42:59,010 and it's very performant okay because 949 00:42:59,010 --> 00:43:02,070 right here we're just generating more so 950 00:43:02,070 --> 00:43:05,640 that's that's it I mean yeah so that's 951 00:43:05,640 --> 00:43:09,480 all we can create a dynamic ListView now 952 00:43:09,480 --> 00:43:11,340 I want to add some functionality here I 953 00:43:11,340 --> 00:43:13,950 want to have an icon on each one on this 954 00:43:13,950 --> 00:43:16,700 side where we can favorite 955 00:43:16,700 --> 00:43:21,290 or are like certain word pairs and then 956 00:43:21,290 --> 00:43:22,880 we'll have a separate page because I do 957 00:43:22,880 --> 00:43:24,349 want to show you how we can have is a 958 00:43:24,349 --> 00:43:27,650 second page where it shows all of our 959 00:43:27,650 --> 00:43:29,900 favorites alright so let's get into that 960 00:43:29,900 --> 00:43:32,420 now one thing I would like to do before 961 00:43:32,420 --> 00:43:35,780 we do that actually is move our random 962 00:43:35,780 --> 00:43:38,630 words widget into a separate file and 963 00:43:38,630 --> 00:43:40,339 include that rather than having 964 00:43:40,339 --> 00:43:41,780 everything in this one 965 00:43:41,780 --> 00:43:45,500 single file so inside Lib let's create a 966 00:43:45,500 --> 00:43:50,119 new file called random underscore words 967 00:43:50,119 --> 00:43:54,740 dot dart okay and then we're gonna need 968 00:43:54,740 --> 00:43:56,750 this we're going to need both of these 969 00:43:56,750 --> 00:43:59,900 imports so I'm gonna copy those and put 970 00:43:59,900 --> 00:44:02,240 those in there and then we're not going 971 00:44:02,240 --> 00:44:04,630 to need this English words here anymore 972 00:44:04,630 --> 00:44:08,540 what we will do is import the random 973 00:44:08,540 --> 00:44:11,900 words the random words 974 00:44:11,900 --> 00:44:15,520 file so from here let's say dot slash 975 00:44:15,520 --> 00:44:17,720 random words dart and then I'm gonna 976 00:44:17,720 --> 00:44:22,579 take both of these classes I'm gonna 977 00:44:22,579 --> 00:44:26,630 take those and move those to our random 978 00:44:26,630 --> 00:44:31,280 words dot darts and save that and then 979 00:44:31,280 --> 00:44:37,369 go back here and save that let's see 980 00:44:37,369 --> 00:44:39,349 what's this going oh I forgot my 981 00:44:39,349 --> 00:44:42,290 semicolon all right so now we're gonna 982 00:44:42,290 --> 00:44:45,109 go back to our random words and we need 983 00:44:45,109 --> 00:44:47,329 a new variable our new property up at 984 00:44:47,329 --> 00:44:50,510 the top here so let's go under random 985 00:44:50,510 --> 00:44:54,410 word pairs and we need a place to store 986 00:44:54,410 --> 00:44:57,050 our saved word pairs okay so basically 987 00:44:57,050 --> 00:44:58,970 we're gonna have a cons when we check on 988 00:44:58,970 --> 00:45:01,970 the heart it's gonna get stored in save 989 00:45:01,970 --> 00:45:04,640 word pairs which is going to be a set so 990 00:45:04,640 --> 00:45:08,599 let's say saved word pairs which is 991 00:45:08,599 --> 00:45:15,559 going to equal a set of word pairs 992 00:45:15,569 --> 00:45:18,099 okay we need parentheses here so 993 00:45:18,099 --> 00:45:20,829 basically a set is a collection of 994 00:45:20,829 --> 00:45:23,859 objects where each object can only 995 00:45:23,859 --> 00:45:26,439 appear once so you can't have multiple 996 00:45:26,439 --> 00:45:28,269 of the same objects and that's fine 997 00:45:28,269 --> 00:45:30,219 because we don't want multiple saved 998 00:45:30,219 --> 00:45:32,739 word pairs all right so now that we've 999 00:45:32,739 --> 00:45:34,419 done that we have this initialize let's 1000 00:45:34,419 --> 00:45:36,609 go down to our build row because that's 1001 00:45:36,609 --> 00:45:38,019 where we're gonna be working for the 1002 00:45:38,019 --> 00:45:40,449 most part in terms of the functionality 1003 00:45:40,449 --> 00:45:43,029 in order to click the icon and show the 1004 00:45:43,029 --> 00:45:47,709 icon and so on so in here let's go above 1005 00:45:47,709 --> 00:45:50,919 our list tile and create a variable 1006 00:45:50,919 --> 00:45:55,719 called already saved and we're gonna set 1007 00:45:55,719 --> 00:45:59,169 that to our saved word pairs and see if 1008 00:45:59,169 --> 00:46:04,119 it contains that the current pair which 1009 00:46:04,119 --> 00:46:07,299 is passed in here okay so each one the 1010 00:46:07,299 --> 00:46:09,069 build row represents each one of these 1011 00:46:09,069 --> 00:46:11,289 so we're gonna look at whatever this is 1012 00:46:11,289 --> 00:46:14,859 and see if it's contained in saved word 1013 00:46:14,859 --> 00:46:18,130 pairs which we just defined above all 1014 00:46:18,130 --> 00:46:20,650 right and then down here we want to have 1015 00:46:20,650 --> 00:46:26,099 our icon so let's see we're gonna go I 1016 00:46:26,099 --> 00:46:29,289 don't like how they vs code formatted 1017 00:46:29,289 --> 00:46:32,319 this so in the list style after the 1018 00:46:32,319 --> 00:46:38,859 title which ends title no after the text 1019 00:46:38,859 --> 00:46:44,319 sorry which ends here yeah let's put 1020 00:46:44,319 --> 00:46:46,689 that over there and put a comma here and 1021 00:46:46,689 --> 00:46:50,349 then we want to have a property called 1022 00:46:50,349 --> 00:46:53,319 trailing okay which means we can put 1023 00:46:53,319 --> 00:46:56,829 something over here we want an icon so 1024 00:46:56,829 --> 00:46:59,650 we want an icon widget and in here I 1025 00:46:59,650 --> 00:47:02,140 could just say icons dot and then 1026 00:47:02,140 --> 00:47:04,299 there's a for the heart icon it's called 1027 00:47:04,299 --> 00:47:07,479 favorite so if I save that we just get a 1028 00:47:07,479 --> 00:47:10,599 bunch of heart icons now the icon needs 1029 00:47:10,599 --> 00:47:13,479 to be conditional right it needs to be 1030 00:47:13,479 --> 00:47:16,809 read if it's saved and then basically 1031 00:47:16,809 --> 00:47:19,419 blank if it's not so instead of just 1032 00:47:19,419 --> 00:47:21,969 putting a hard-coded icon I'm going to 1033 00:47:21,969 --> 00:47:24,099 take that already saved value which will 1034 00:47:24,099 --> 00:47:26,110 be either true or false and use 1035 00:47:26,110 --> 00:47:30,130 ternary and say if so then we want icons 1036 00:47:30,130 --> 00:47:34,750 dot favorites else then we want icons 1037 00:47:34,750 --> 00:47:38,260 dot and we're gonna use favorites border 1038 00:47:38,260 --> 00:47:41,410 which is basically like like an empty 1039 00:47:41,410 --> 00:47:44,020 heart it's not filled in gray but we do 1040 00:47:44,020 --> 00:47:48,190 want to add a color if it's saved right 1041 00:47:48,190 --> 00:47:49,870 if it's already saved we want it to be 1042 00:47:49,870 --> 00:47:53,080 red so we're gonna specify color which 1043 00:47:53,080 --> 00:47:55,870 is also conditional depending on already 1044 00:47:55,870 --> 00:47:58,240 saved so if it is saved then we're gonna 1045 00:47:58,240 --> 00:48:01,540 use colors dot red else then it's gonna 1046 00:48:01,540 --> 00:48:04,270 be null no color so let's save that and 1047 00:48:04,270 --> 00:48:08,620 now we get a bunch of blank hearts so we 1048 00:48:08,620 --> 00:48:10,570 need the functionality where we click on 1049 00:48:10,570 --> 00:48:13,000 a heart and we have an event fire off 1050 00:48:13,000 --> 00:48:16,230 and we basically either add or remove 1051 00:48:16,230 --> 00:48:20,680 this item to already saved so we're 1052 00:48:20,680 --> 00:48:25,960 gonna go underneath trailing so let's 1053 00:48:25,960 --> 00:48:30,250 say we want to be I really don't like 1054 00:48:30,250 --> 00:48:32,290 how this is formatted so we have 1055 00:48:32,290 --> 00:48:38,800 trailing no so underneath this we're 1056 00:48:38,800 --> 00:48:41,680 gonna put on tap okay which is just that 1057 00:48:41,680 --> 00:48:43,900 it's when when this icon is tapped 1058 00:48:43,900 --> 00:48:46,540 we're gonna run a function and this is 1059 00:48:46,540 --> 00:48:48,490 where we're going to actually change the 1060 00:48:48,490 --> 00:48:52,150 state we're gonna use set state and set 1061 00:48:52,150 --> 00:48:56,530 state takes in a function and we want to 1062 00:48:56,530 --> 00:48:58,810 check to see if this item is already 1063 00:48:58,810 --> 00:49:02,560 saved okay so if it's already saved then 1064 00:49:02,560 --> 00:49:04,480 we're gonna take our saved word pairs 1065 00:49:04,480 --> 00:49:07,120 which is where it's stored and we're 1066 00:49:07,120 --> 00:49:09,940 gonna remove okay if we click it because 1067 00:49:09,940 --> 00:49:12,280 we're gonna be able to toggle our saved 1068 00:49:12,280 --> 00:49:16,090 items else then we're gonna take the 1069 00:49:16,090 --> 00:49:18,760 saved word pairs and we're going to add 1070 00:49:18,760 --> 00:49:22,150 the pair okay and the pair being 1071 00:49:22,150 --> 00:49:24,460 whatever the current iteration is 1072 00:49:24,460 --> 00:49:27,840 whatever is passed in right here 1073 00:49:27,840 --> 00:49:31,420 alright so let's save that and if we go 1074 00:49:31,420 --> 00:49:34,030 over here if I click even if I just 1075 00:49:34,030 --> 00:49:35,920 click anywhere in here it doesn't have 1076 00:49:35,920 --> 00:49:37,810 to be on the actual icon you'll see that 1077 00:49:37,810 --> 00:49:40,510 it turns red so it's getting 1078 00:49:40,510 --> 00:49:43,450 to this already I'm sorry it's getting 1079 00:49:43,450 --> 00:49:46,869 added to this saved word pairs okay if I 1080 00:49:46,869 --> 00:49:48,670 click it again it should toggle it and 1081 00:49:48,670 --> 00:49:53,290 unsaved it so we're actually using state 1082 00:49:53,290 --> 00:49:55,990 here now the last thing I want to do is 1083 00:49:55,990 --> 00:49:57,580 I want to have a separate page that 1084 00:49:57,580 --> 00:49:59,830 shows us the ones that are saved because 1085 00:49:59,830 --> 00:50:02,740 if we go like way down here and click 1086 00:50:02,740 --> 00:50:04,270 one you know we don't want to have to 1087 00:50:04,270 --> 00:50:06,160 just search for them so we want a 1088 00:50:06,160 --> 00:50:10,050 separate page that lists our favorites 1089 00:50:10,050 --> 00:50:12,520 all right so let's do that we're gonna 1090 00:50:12,520 --> 00:50:15,580 create a little button up here to be 1091 00:50:15,580 --> 00:50:17,859 able to do that so down where we have 1092 00:50:17,859 --> 00:50:20,560 the app bar in the the build method here 1093 00:50:20,560 --> 00:50:23,920 in addition to title let's put a comma 1094 00:50:23,920 --> 00:50:26,100 here because we're gonna add on to this 1095 00:50:26,100 --> 00:50:28,960 actually let's put you see so this is 1096 00:50:28,960 --> 00:50:33,869 more readable put this here and then 1097 00:50:33,869 --> 00:50:39,270 right under the title let's have actions 1098 00:50:39,270 --> 00:50:46,540 and actions we're going to define widget 1099 00:50:46,540 --> 00:50:51,060 and then open up some square brackets 1100 00:50:51,060 --> 00:50:55,359 okay and in these square brackets let's 1101 00:50:55,359 --> 00:50:58,180 put a comma here we want to put an icon 1102 00:50:58,180 --> 00:51:01,660 button okay which is just another widget 1103 00:51:01,660 --> 00:51:04,590 and inside here it takes a property of 1104 00:51:04,590 --> 00:51:08,950 icon and we're gonna set that to an icon 1105 00:51:08,950 --> 00:51:12,970 widget which takes in whatever icon we 1106 00:51:12,970 --> 00:51:14,230 want to use I'm going to use the list 1107 00:51:14,230 --> 00:51:18,070 icon so icons dot lists and then after 1108 00:51:18,070 --> 00:51:21,970 that we want to put on pressed so what 1109 00:51:21,970 --> 00:51:23,920 happens when we actually press this 1110 00:51:23,920 --> 00:51:27,060 we're gonna call a function called push 1111 00:51:27,060 --> 00:51:30,609 saved okay and then I'll just create 1112 00:51:30,609 --> 00:51:33,460 that function right up here so void 1113 00:51:33,460 --> 00:51:34,630 because it doesn't it's not going to 1114 00:51:34,630 --> 00:51:39,450 return anything and then push saved 1115 00:51:39,450 --> 00:51:41,890 alright and I'll just save that and now 1116 00:51:41,890 --> 00:51:43,930 you can see that we have the the actual 1117 00:51:43,930 --> 00:51:47,680 icon up here and when we click that or 1118 00:51:47,680 --> 00:51:49,780 when we tap that or press it whatever 1119 00:51:49,780 --> 00:51:51,490 you want to call it it's going to call 1120 00:51:51,490 --> 00:51:54,280 this function so in here 1121 00:51:54,280 --> 00:51:57,970 we basically want to navigate to a 1122 00:51:57,970 --> 00:52:00,460 different route on the stack so your 1123 00:52:00,460 --> 00:52:02,950 home page this page here is the bottom 1124 00:52:02,950 --> 00:52:05,230 route in the stack and you can use a 1125 00:52:05,230 --> 00:52:09,730 navigator class to basically add another 1126 00:52:09,730 --> 00:52:12,400 add another route on top of it what's 1127 00:52:12,400 --> 00:52:14,770 called a mere material page route so 1128 00:52:14,770 --> 00:52:19,030 we're gonna say navigator dot of our 1129 00:52:19,030 --> 00:52:21,790 context and then push ok so we're going 1130 00:52:21,790 --> 00:52:25,210 to push on to the stack and then here 1131 00:52:25,210 --> 00:52:28,450 what we want to push is a material page 1132 00:52:28,450 --> 00:52:33,360 route and material page route has a 1133 00:52:33,360 --> 00:52:36,970 function called builder okay so I want 1134 00:52:36,970 --> 00:52:39,310 to set that to a function and that takes 1135 00:52:39,310 --> 00:52:45,220 in a build context and in here is 1136 00:52:45,220 --> 00:52:47,230 basically what you want to show on this 1137 00:52:47,230 --> 00:52:50,020 new route and I just want to show you 1138 00:52:50,020 --> 00:52:52,020 real quick this is the Navigator class 1139 00:52:52,020 --> 00:52:55,180 documentation so it's a widget that 1140 00:52:55,180 --> 00:52:57,520 manages a set of child widgets with a 1141 00:52:57,520 --> 00:53:00,550 stack discipline mobile ads typically 1142 00:53:00,550 --> 00:53:03,520 apps typically reveal their contents 1143 00:53:03,520 --> 00:53:05,110 fullscreen they're called screens or 1144 00:53:05,110 --> 00:53:07,150 pages and flutter these elements are 1145 00:53:07,150 --> 00:53:09,070 called routes and they're managed by a 1146 00:53:09,070 --> 00:53:11,890 navigator widget the Navigator manages a 1147 00:53:11,890 --> 00:53:14,050 stack of route objects and provides 1148 00:53:14,050 --> 00:53:16,300 methods for managing the stack like push 1149 00:53:16,300 --> 00:53:20,290 and pull and pop let's say so down here 1150 00:53:20,290 --> 00:53:23,950 it says it's right here to push a new 1151 00:53:23,950 --> 00:53:25,750 route onto the stack you can create an 1152 00:53:25,750 --> 00:53:28,030 instance of material page route with a 1153 00:53:28,030 --> 00:53:29,770 builder function that's what I just did 1154 00:53:29,770 --> 00:53:32,290 that creates whatever you want to appear 1155 00:53:32,290 --> 00:53:33,730 on the screen and then here they just 1156 00:53:33,730 --> 00:53:35,520 have a simple example where they have a 1157 00:53:35,520 --> 00:53:38,920 center widget with a text widget and so 1158 00:53:38,920 --> 00:53:42,040 on but what we're gonna do is create a 1159 00:53:42,040 --> 00:53:47,440 list of our saved word pairs alright so 1160 00:53:47,440 --> 00:53:49,030 here we're gonna create a variable let's 1161 00:53:49,030 --> 00:53:54,610 say final tiles so we're creating a list 1162 00:53:54,610 --> 00:53:57,250 tile actually we're creating an iterable 1163 00:53:57,250 --> 00:54:02,150 so let's say iterable 1164 00:54:02,160 --> 00:54:06,550 Liss tiles and we're gonna set this to 1165 00:54:06,550 --> 00:54:09,220 our saved word pairs and we're gonna use 1166 00:54:09,220 --> 00:54:12,040 the math method here okay so we can map 1167 00:54:12,040 --> 00:54:15,220 through this and then in here we want 1168 00:54:15,220 --> 00:54:17,260 another set of parentheses because we 1169 00:54:17,260 --> 00:54:19,420 need a function function gets passed 1170 00:54:19,420 --> 00:54:22,180 into map and for each one it's gonna be 1171 00:54:22,180 --> 00:54:25,869 a pair and it's a word pair okay and 1172 00:54:25,869 --> 00:54:31,380 then from here we want to return a list 1173 00:54:31,380 --> 00:54:36,970 style and a list tile takes in a title 1174 00:54:36,970 --> 00:54:40,960 which you're gonna say text a text 1175 00:54:40,960 --> 00:54:42,790 widget and it's gonna take in whatever 1176 00:54:42,790 --> 00:54:45,070 whatever pair is and then we're gonna 1177 00:54:45,070 --> 00:54:48,130 display it as Pascal case we'll add some 1178 00:54:48,130 --> 00:54:50,710 styles so we want to use a text style 1179 00:54:50,710 --> 00:54:56,349 widget here and let's do font size and 1180 00:54:56,349 --> 00:54:58,420 set that to 16 because we want this to 1181 00:54:58,420 --> 00:55:00,400 look as much like the home page as 1182 00:55:00,400 --> 00:55:06,280 possible you need semicolons here okay 1183 00:55:06,280 --> 00:55:08,950 so this builder has to return something 1184 00:55:08,950 --> 00:55:13,930 so let's see builder ends right here so 1185 00:55:13,930 --> 00:55:16,750 we want to go down here and we want to 1186 00:55:16,750 --> 00:55:21,280 create our list with dividers okay 1187 00:55:21,280 --> 00:55:22,900 remember on right here on the home page 1188 00:55:22,900 --> 00:55:26,320 we have these dividers so we can do this 1189 00:55:26,320 --> 00:55:33,010 let's say final divided actually let's 1190 00:55:33,010 --> 00:55:36,730 give this a type of list which is a 1191 00:55:36,730 --> 00:55:41,950 widget and set this divided to our list 1192 00:55:41,950 --> 00:55:45,609 tile which has a method called divide 1193 00:55:45,609 --> 00:55:48,520 tiles okay so we're gonna call this 1194 00:55:48,520 --> 00:55:50,560 divide tiles and if we hover over this 1195 00:55:50,560 --> 00:55:53,200 it says it adds a one pixel border in 1196 00:55:53,200 --> 00:55:56,050 between each tile and it will use the 1197 00:55:56,050 --> 00:55:57,820 theme color and so on unless unless 1198 00:55:57,820 --> 00:55:59,710 you'd provide a different color but 1199 00:55:59,710 --> 00:56:01,030 that's what we want to call and this 1200 00:56:01,030 --> 00:56:04,510 takes in a context which we're passing 1201 00:56:04,510 --> 00:56:07,180 in the context from up here and then it 1202 00:56:07,180 --> 00:56:09,700 also takes in tiles 1203 00:56:09,700 --> 00:56:11,390 which we have 1204 00:56:11,390 --> 00:56:16,220 right here okay so we have our list tile 1205 00:56:16,220 --> 00:56:20,570 here so let's see that's just put a 1206 00:56:20,570 --> 00:56:24,860 semicolon here and then finally we have 1207 00:56:24,860 --> 00:56:28,670 to actually call to list and if we hover 1208 00:56:28,670 --> 00:56:30,500 over that you'll see that it creates a 1209 00:56:30,500 --> 00:56:32,390 list containing the elements of this 1210 00:56:32,390 --> 00:56:35,510 iterable okay the elements are in 1211 00:56:35,510 --> 00:56:38,000 iteration order the list is fixed length 1212 00:56:38,000 --> 00:56:43,040 if growable is false all right and then 1213 00:56:43,040 --> 00:56:46,310 finally we want to return a scaffold 1214 00:56:46,310 --> 00:56:48,140 widget so we're going to go under the 1215 00:56:48,140 --> 00:56:50,630 two lists here and we're going to return 1216 00:56:50,630 --> 00:56:55,240 from our builder function a scaffold and 1217 00:56:55,240 --> 00:56:58,130 in here we're gonna pass in an app bar 1218 00:56:58,130 --> 00:56:59,840 because remember this is a new route or 1219 00:56:59,840 --> 00:57:02,240 a new page and we're gonna have an app 1220 00:57:02,240 --> 00:57:07,670 bar widget and this takes in a title and 1221 00:57:07,670 --> 00:57:10,400 we're gonna have a text widget as the 1222 00:57:10,400 --> 00:57:16,400 title and it's gonna say saved word 1223 00:57:16,400 --> 00:57:21,170 pairs and let's see after the app bar we 1224 00:57:21,170 --> 00:57:24,200 have our body and the body is gonna be a 1225 00:57:24,200 --> 00:57:29,360 ListView component widget sorry and then 1226 00:57:29,360 --> 00:57:31,880 this can take in a children property 1227 00:57:31,880 --> 00:57:34,280 which is going to be our divided 1228 00:57:34,280 --> 00:57:40,190 variable okay our divided list and I 1229 00:57:40,190 --> 00:57:44,390 think that's it but save gets full-auto 1230 00:57:44,390 --> 00:57:46,610 formatted and if we click that there we 1231 00:57:46,610 --> 00:57:48,620 go so you can see all of our saved word 1232 00:57:48,620 --> 00:57:52,790 pairs if I uncheck some of these will 1233 00:57:52,790 --> 00:57:54,830 uncheck dark mine and warm 1234 00:57:54,830 --> 00:57:57,680 Eze and go back now we have just these 1235 00:57:57,680 --> 00:58:00,770 two all right so this gives you a good 1236 00:58:00,770 --> 00:58:03,470 example of how we can keep State in our 1237 00:58:03,470 --> 00:58:07,700 application go back there we go all 1238 00:58:07,700 --> 00:58:09,650 right so it's it's not the you know the 1239 00:58:09,650 --> 00:58:12,650 most useful app in the world but I 1240 00:58:12,650 --> 00:58:14,150 wanted to do something that was more 1241 00:58:14,150 --> 00:58:17,420 than just some you know static static 1242 00:58:17,420 --> 00:58:19,460 list or whatever just showing you like 1243 00:58:19,460 --> 00:58:21,920 UI components and widgets and actually 1244 00:58:21,920 --> 00:58:24,650 having some logic so hopefully you at 1245 00:58:24,650 --> 00:58:25,220 least 1246 00:58:25,220 --> 00:58:27,830 learn the fundamentals and learned how 1247 00:58:27,830 --> 00:58:30,020 to create stateless and stateful widgets 1248 00:58:30,020 --> 00:58:32,570 and learned about you know scaffold and 1249 00:58:32,570 --> 00:58:35,480 app bars and all that stuff and how to 1250 00:58:35,480 --> 00:58:38,060 add some logic list views list styles 1251 00:58:38,060 --> 00:58:42,140 and and so on so as far as publishing to 1252 00:58:42,140 --> 00:58:44,540 a device like creating an app for the 1253 00:58:44,540 --> 00:58:47,599 App Store you can look at 1254 00:58:47,599 --> 00:58:51,830 let's see flutter iOS build so this page 1255 00:58:51,830 --> 00:58:54,260 here will tell you how to do that you 1256 00:58:54,260 --> 00:58:55,790 need to register your app on the App 1257 00:58:55,790 --> 00:58:57,530 Store connect and you need to take some 1258 00:58:57,530 --> 00:59:00,230 steps and preparations for that and you 1259 00:59:00,230 --> 00:59:03,730 can also search for flutter Android 1260 00:59:03,730 --> 00:59:08,270 build and some steps to to go through 1261 00:59:08,270 --> 00:59:10,250 that as well okay but I'm not going to 1262 00:59:10,250 --> 00:59:12,260 do this in this course obviously this is 1263 00:59:12,260 --> 00:59:15,290 just a beginners crash course alright so 1264 00:59:15,290 --> 00:59:17,000 that's it hopefully you enjoyed this and 1265 00:59:17,000 --> 00:59:20,320 I'll see you in the next video