Installing Flutter on Windows

hey guys what's up so in this video I'm gonna be installing the flare SDK and Visual Studio code on Windows 10 so if you're using a map Mac just switch to the next video so what is the flutter SDK so an SDK stands for software development kit a software development kit usually includes two main things one is source code just a chunk of code someone else wrote and 2 it includes utilities that makes your life easier as a software developer so the first part is Google's flutter code is in this SDK and when we write apps we're gonna write our own source code but we're gonna use their source code as well to kind of build and run on the actual app second thing is the tool that they provide is called flutter it's you actually type it flutter on the command line and that tool lets you create apps build and run apps right those are the main things that lets you do so I'm going to show that to you right now so open a web browser and go to flutter IO and then click the getting started button on the top right click the windows button and first make sure that you have all your system requirements there so you have at least Windows 7 and that certain amount of disk space and all of this stuff so you most likely have Windows PowerShell you don't have to check that if you're using Windows 10 but also you need get for Windows and get for Windows is needed to kind of update the flutter source code when new versions come out now if you don't know what git is I will include a link in the show notes that where you can read about it but basically all it is is a command line tool that lets you fetch code from the internet and update that code so to make sure you have git for Windows I'm gonna minimize the screen here and I'm going to open my command prompt so when so for folks that are not familiar with command prompts and that's quite possible there's two types of programs on your computer right ones that run in a window so I have a Chrome web browser here that one type of program but another type of program runs only on the command line so if I tap my Cortana button in Windows 10 here just is easier for me to find a program and I type C M D I see in my results here the command prompt app so you might want to create a desktop icon for this later so the command prompt was like it existed before any like Windows operating system existed and in back in the day you would only use the command prompt so right now for example it shows me that I'm in my C users see net code directory right so I do have that directory on my computer's C users sina code and instead of just managing my files here and running programs i can do that same thing with commands on the command line anyway so that's a command line i won't drill into that too much but basically if i want to check if git is installed I just type git and hit enter so if I see output here I have it installed if I see an error I don't and I'm gonna have to install it from this installation page here there's a link here anyway now let's get the flutter SDK so I'm gonna click this it's going to download the zip file I've already done it before I started the video because it takes a little bit and that file you'll see is here it is a zip file so that means it's a compressed file that you need to extract the contents of so I'm gonna select this directory click the extract button on the top here and then there's an extract all' button i'm gonna then follow all the default options and just hit next next finish whatever and I've already done that because it takes a while on Windows takes a long time on Windows and it extracts this directory here so this is the flutter SDK so I'm going to double click into here and there's a flutter directory and let's take a look at that for a second so the two main things that are you know I'm talking about here is in packages that's all the Google's source code the flutter SDK the source code I was talking about earlier and the second thing is a bin directory so a bin directory stands for binary so it's a binary as something you can run typically so it this is the actual flutter command that we can run on Windows but the problem is is that I don't want to have to go to this directory every time I want to run this flutter command so I want to be able to just open a command prompt and no matter where I am on my computer I could just run flutter and it would work right so that's what Google is specifying here in the instructions updating your path so that's what I so a path is wherever you are currently on your command line so now to get this to work I'm gonna have to edit what's called an environment variable an environment variable is a setting that's global to your whole computer right and there's a specific environment variable that we're gonna have to add called we're gonna have to customize our path environment variable and that's what they mean by updating your path and if you're not sure about paths and environment variables I have a link in the show notes to read about that stuff so let's do that now so I'm gonna type click the Cortana button type env and I'm gonna have an option here that says edit the system environment variables and here I'm gonna click the environment variables button and then up at the top here for my user I want to edit the path environment variable so I'm going to hit edit and then they're gonna add a hit hit new and add a new path here and I'm gonna cite the path that's I'm gonna include the path to the fluttered bin directory now before we do that we're gonna have to find a home for my fluttered directory I don't want it to live in the Downloads directory because I can delete it by mistake right sometimes I clean out my downloads folder so is the best practice isn't what google recommends and i recommend it also is we want to right click this flutter directory select cut go to my C Drive and create a directory called SRC and SRC is just an industry terminology that stands for source code it's just a convention that's existed for ever and I'm going to go into my SRC directory I create you're gonna have to create it if it's not there and I'm going to right click and hit paste and now it's gonna move the fluttered directory here and now my path to the flutter bin directory see ice like flutter bin this is going to be my path right so I'm going to type in that path here so I'm gonna go back to my environment variables I'm editing my path variable at the moment I'll show you see path here I hit edit hit new type C colon backslash made sure it's a backslash not a forward slash this is a forward slash this is a back slash SRC backslash flutter back slash VI and bin so I hit OK hit OK and now for the changes to take effect I have to reopen the command line so I'm gonna X out of this hit the Cortana button type CMD command prompt and now if I hit type flutter and then hit enter I'm now gonna see that the flutter command works right I can run it from wherever I am if I'm in the C directory I can still run it right so it doesn't matter where I am so and and if you don't know basic command prompt commands like it's really important that you know two of them to start off with one is the one I just did which is CD it's called it stands for change directory and changing directory another one is dir and this is on windows dir lists all the files and folders on your computer in based on the directory you're currently in anyway we're not going to use the command line much for flutter development because those tools that I'm running on the command line already built into our visual studio code and we're going to install that so part one is done okay so let's get to part two and so that is installing Visual Studio code Visual Studio code is an IDE and that stands for integrated development environment so I'm going to search for Visual Studio code on google and it should be the first link here and I'm gonna click download for Windows so I've already downloaded it just to kind of get it out of the way for the video and you'll see this in the Downloads directory we're gonna double click it and just follow just choose all the default options it gives you so hit next accept agreement Next Next now I can't say create a desktop icon sure if I want just keep all these options it's gonna install so anyway you know as I was saying what an IDE is so an IDE is integrated development environment and all that is is a fancy text editor so if you're not gonna edit your source code with notepad or something you're gonna edit with an IDE meaning an IDE gives you specific tools that just makes your job as a software engineer easier specifically it will automatically format your code so make sure the right indentations there the right line breaks are in there when you save your file it's gonna also highlight code so you can read it easily it's also going to let you run and build code debug code from the IDE itself rather than using a command line so those are the high-level main things an IDE actually does so I'm gonna say launch Visual Studio code and to get flutter integrated with the IDE here is we're gonna have to install what's called an extension for Visual Studio code an extension is just a plug-in essentially and it's of course free and I'm gonna click view here and hit extensions I can also click this square icon here I don't know what it is but and I can now search the visual studio code marketplace for extensions so one of them is flutter so I'm going to type flutter hit install and that's mainly it another it's an optional extension is the material dark theme it just gives you it it it highlights your code and and just makes it look nicer using a dark theme that's all a dark color theme you can change your color theme by going to file preferences color theme so and I can hit up or down the up or down arrow and as you can see some people you know prefer a light color theme some people want to look cool but all actually it's to me it's easier on my eyes to use a dark theme right so to use the material dark theme I can hit reload reloads the application and now I can use it so let's say I have some source code open it doesn't matter I can show you anyway go to preferences color theme and now I can hit the down arrow and choose the material dark theme so that's the material dark theme it just looks nicer cool so we have Visual Studio installed and I installed the flutter extension and next we're going to actually generate a flutter project okay so next we're gonna actually install an Android emulator so we we're gonna generate an Android a flutter project but we need to run it on something right it could be a physical device or what's known as an emulator and an emulator is basically a virtual device so what I need to install Android an Android emulator with is something called Android studio Android studio is an IDE as well and it's free I'm just going to search for Android studio and I just hit download I've already download it and install it so it's like get it out of the way and usually people developing Android apps not flutter like only apps but Android specific apps use Android studio people do use Android studio for developing flutter apps I just like Visual Studio code better because it's just more user friendly especially to junior developers but I personally just like Visual Studio code also for just normal development but what Android studio gives you is I've already I'm already running it right now is so I've started up Android studio is it gives you something called the AVD manager so if I go to tools and I'm gonna select a video for Android device a virtual device manager it's gonna let me create an Android device so I'm gonna hit create virtual device and I'm just gonna highlight pixel two because it's just a common phone each phone has its own like screen dimensions and all that doesn't really matter right now the next thing is I'm gonna install a an image so this each one of these is a different like Android SDK version that will run a different Android operating system that will run on your phone so I'm gonna just highlight the latest and I already downloaded this this one so but for you you're probably gonna tap a download button you'll have a download button here you're gonna tap that it's going to install it and what that is it's going to run Android 9.0 and you know if you watch this video later it'll be a later version probably and it's going to use a specific Android API version so as we get more advanced in flutter development you know you want to test your flutter code against different versions of Android to make sure it's running on all types of devices but this is fine for now so I'm gonna hit next I don't need to name it just hit finish it's going to create that and on the right here there's a play button so I'm gonna run my Android device emulator and it will start up and while it's starting up I'm gonna just minimize Android studio and now I'm going to create a flutter project so I'm going to now need of home for my flutter code right I need I need a directory where I'm gonna create all my flutter code and I'm gonna use the file explorer to do that so I'm gonna go to see users I'm gonna highlight my double-click my user name and then I'm gonna select new folder and I'm gonna type in code and so this is the path to all the projects I want to create this is I'm gonna keep all my projects in the same place right so let's go to there on the command line so I'm going to say CD C colon backslash users my user name right and then I could type dir I could see all the files here I see a code directory so I can say CD code so change directory to code and I have nothing here right so now I'm going to create the flour project so the flutter command has a lot of options to it and we won't go over all of them oops this craft for some reason let me restart my Android emulator so the flutter command has a lot of options to it you can save flutter run as you see here flutter build write flutter creates etc so the command we're going to use for now is flutter space creates space and then the name of the project I want to create so the project we're gonna create is HelloWorld so hello underscore world in the dart flutter world if you have a space always use an underscore you don't ever use don't ever use a dash here it's not going to let you do that anyway you can use an underscore make sure it's always under lower case so any files or projects you create are always always lowercase and then I'm gonna hit enter all right my phone is running now on the right so I'm gonna put my phone up here and then boom it's it's done okay so it says I can say CD hello world and I can say flutter run but I'm not going to do that I can use my IDE to run the project so in Visual Studio code I'm gonna say file open folder and go to my code directory I already have it open here highlight hello world and just say select folder so what that's going to do is load the entire contents of that created flutter project here for me right so there's four main directories Android iOS Lib and test so Android and iOS well let me run the project first and I'll wallet while we're waiting I'll go over that to run the flutter project I'm going to say debug at the top and say start debugging so debugging is something I'll go over in another lesson but effectively that means you're going to run your project it's going to compile your code and run it I can also I can alternatively hit f5 so I'm going to hit f5 and then it's gonna say select environment so I'm going to select dart and flutter and I'm gonna kind of resize my window here so you can see the Android emulator on the right and my code on the left okay so anyway while that's running let me explain some other basics to you the files that a flutter project has is Android and iOS each one of these files are the configurations you need so to kind of like submit your apps to the App Store's right so if I'm building an Android project I want to configure the app icon for it I'm going to configure a certain file and add some assets into this Android directory and I'll cover that in another lesson I'm saying for iOS also if I all my source code is in Lib or library so all my source code I'm gonna organize it here by default there's a main dart file that that will run there's a test directory these are all my tests I'm also going to cover that in another video and lastly there's this temporary directory called build and you don't need to be concerned about that that's the that's the just stuff that's generated when I build my code so cool my flutter app is running for all the for all students or anyone who's a newcomer do not open main dart and read through it because it's overly complex and it just will kind of it's intimidating to look through we're gonna be gutting this project in another upcoming video and we're gonna be starting from scratch with just far more far simpler code right so just you don't need to look at that for now cool so my you know again my flutter app is running and yeah like it just shows some text on the screen and a button and that's it so lastly a few more things just to orient yourself with visual studio code this bar appears when I'm running an app I can hit stop to stop the app and I can hit this to just completely reload it if I want to of course I'll go into the hot reload feature later well more on that later and these are just icons for debugging again you don't need to worry about that for now on the left here is my file explorer I can hide it and show it if I want more room I can hide it by clicking on it I can search all code in my project here this is just stuff forget or source control you don't need to be concerned about that right now debugging tools install extensions and lastly show test output so if I'm running tests it just gives me an easier way to see how my tests have run at the and the middle here is where you edit your code and also at the bottom here this is kind of like contextual information for you it's low-level information so if if the app crashes or something it'll give you some information here on what happens we you don't need to be concerned about it right now you can just hide it by clicking the X and and you can hold ctrl J and to toggle it hidden or not hit in cool I guess that's it so thanks for watching

Channel: Nick Manning (seenickcode)

Views: 78,450

Keywords:

Id: EDlywQeg5Vs

Length: 22min 44sec (1364 seconds)

Published: Sun Jan 20 2019