How to setup Flutter, Visual Studio Code, and Android Emulator on Windows - 2022

okay so in this video we are going to see how to set up flutter with windows system so first of all you have to go to this link docs.flutter.dev and in this link i will be sharing this link in the description so you can see this link so go to this link and you will see all these options so you can set a flutter for windows mac os linux and chrome os so for this video we'll be going for windows so let's click on windows and you can see your system requirements which is needed to set a flutter in your system and then this is the flutter which you need so what you have to do click on it and download the zip folder so i've already downloaded it so i won't do it so the first thing is go to this link and download this zip folder and then if you see i have already downloaded it and i have also created a folder in my c so in my c directory i have created this flutter folder so what i'll do is i will extract the content of this downloaded folder into the c folder so right click and then extract all and i will extract it to my c folder folder flutter so i'll extract everything over here and then select folder and this should extract everything okay so this will take some time so let's wait for it okay so now the extract has completed successfully and we have a new flutter folder and you can see all these files and folders are already there so what you need to do is go to this bin folder and copy this path copy this path because we will be setting it in the environment variable so after copying it you have to search for environment in environment so edit the system environment variable that is what you need to go for so open that and you will see something like this so what you need to set is environment variable so go for it and there are two options one is user variable and one is system variable so in the user variables what you need to do is select this path and double click on it and what you need to do is create new entry and paste your path which we just copied so our flutter path we just copied and then click on ok and then click on ok again and this should set the flutter to your windows system so after setting this up flutter is all set up to use in your windows system so to test whether flutter is properly set up or not what you need to do is open command prompt open command prompt and just say flutter dash dash version now so as you can see it says flutter 3.0.0 channels table has been set up properly in your system so this is fine this is good now what we need to do we need to set up another things like android studio and vs code before that let's run one command saying flutter doctor and it will tell you what and all is pending in your system to start writing your code in flutter so as you can see it says flutter channels table is installed properly so there is a check mark which says android tool chain is not installed so there is a cross there is a red cross so it says that you need to install it if you want to use flutter for creating android application and then for chrome it is installed properly because chrome is already there in your system if chrome is not there then it will be cross as well so you can create web application using flutter as well and then vs code is also not installed if you want it so this is in yellow because vs code is not mandatory you can write your code on android studio as well and android studio is also not mandatory so these two are not mandatory but android studio you will require if you want to create a mobile application let's install android studio first so if you go at the bottom it will tell you how to set up android as well so you have to download and install android studio so let's go to this link and then we have this download android studio option so let's just click on it agree on all the agreements and let it download so let's wait for it to download and then we will install it in our windows system now the android studio exe file has been downloaded successfully so let's just double click on it and then you should get something like this welcome to android studio just click on next click on next uh wherever you want to install it i will leave it over here so click on next and install so this will take some time to install android studio in your windows so let's wait for it once this has completed click on next again and it will say start in our studio so so we do want to do that so let's click on finish and let it start android studio so we do not have any prior installation config so do not import settings and click on ok and it will start android studio click on next and then next and i want this one so let's click on next and click on next accept it and android sdk license as well except this and android sdk preview license accept this and then click on finish so this has finished but you can see some errors so we can ignore this error for now uh do not worry about this if you're not getting any error then that's good but i am getting this error but i'll ignore it for now and click on finish so once you finish it will show you the screen and what you can do is go to sdk manager so let's go to sdk manager and then go to sdk tools and just select this android sdk command line tools so once you have selected this click on apply and confirm changes that is fine click on ok and then let it install it once this is installed click on finish click on ok and then go to your command prompt and run your flutter doctor command again and this will show you your current status so as you can see it says that android studio is installed and the only problem with android is android tool change so to resolve this run flutter doctor android license so we have to copy this command ctrl c and then ctrl v and then it will ask you to accept some license so let's do that so click on y and enter y and enter y and enter y and enter and it's all accepted so now if we run flutter doctor all the issues related to android studio should disappear so let's run it okay so as you can see android tool chain it's green and android studio is also green so all we need is visual studio now so let's go to our google say visual studio code so this is what we need and then go to downloads and then download for windows so once it is downloaded just double click on it accept the agreement click on next click on next and install so once this is installed you will see this screen just click on finish and it will launch vs code now from here you can create new application so let's open a new folder so i'll create a new application in my c flutter directory itself so i had created in c flutter and i'll just create new folder over here and i'll say projects so i will save all my projects in this folder and select this folder and since there's nothing it wouldn't show nothing so just trust it first and then in the terminal you will open new terminal so you can create new project using flutter command that is flutter create and then your project name so i'll say my project just first project and then click on it and it should start creating your project in this directory and there you go so this is our project you can see in this folder so we have to open this folder now so if you go and say open folder and if you go in project this is my project and you can say select folder so we are in our application now so now in to run this application what you need to do is go to extensions and download flutter from this extension so type flutter and then install and there is some awesome flutter snippets so you can install these as well it will really help you okay so flutter package has been installed now so now i can go ahead and run my application so let's close this and to run your application if you see over here run and in this you have this option start debugging so if you click on it so it will give you options so select dart and flutter from these options okay so your vs code is ready and your extension is also ready you can run your application but you do not have android emulator so to do so let's install one android emulator so let's open our android studio first and then we will install one android emulator so that we can run our application so let's wait for android studio and now in the more actions as you can see it says virtual device manager so click on virtual device manager and as you see we do not have any emulator so click on create virtual device manager and you can create tv phone tablet wear os all these things so what we need is we just need a simple phone emulator android phone emulator so i'll just select pixel and then click on next uh you will have to download one of the os so i can download this r itself so let's wait for it to install okay now the install has been done so we can click on this finish and then i can select it and click on next and this is the specification for your android emulator so everything is fine so click on finish and now you can see your pixel excel api 30 emulator ready so i can run it from here so let's wait for it okay so now our android emulator is ready it is giving some pop-up so we can ignore it click on ok so as you can see since this android emulator is ready in my vs code in the selected device it has automatically selected android sdk this android emulator which we have just created pixel xl so this is selected now you have to make sure that this is selected and then click on run and start debugging and now as you can see the application is running successfully in our android emulator so this is the sample project which flutter gives and it is running successfully in our emulator so this is it with this video thank you so much for watching if you like then please do subscribe and like and comment

Channel: Harsivo Edu

Views: 101,327

Keywords: flutter, flutter tutorial, flutter vscode setup, flutter android studio, Setup Flutter, Visual Studio Code and Android Emulator, flutter setup for windows, flutter setup in vscode, flutter android emulator vscode

Id: ZSWfgxrxN0M

Length: 12min 19sec (739 seconds)

Published: Thu May 19 2022