Set up Flutter with VSCODE in Windows | flutter in 2022

hey guys what's up in this video we'll be setting up flutter with vs code we will also be looking into how to set the environment variables correctly as a lot of beginners do some mistakes here and they get stuck at the pretty early stage so we'll see how to not do those and let's just get started so first of all let's just go ahead and install the vs code editor let's just go to the website and just click here so this is the official website and let's just hit the download button over here and let it start the download and i actually have it downloaded on my system so i will not be downloading it again [Music] now once you have the file downloaded just double click to install the setup and click next i agree here explore location and yes next and you can select all of these if you like you can go through and read them and let's just click next over here and install now quickly let's just go to the flutter.dev website that is the official website for flutter and download the flutter sdk now you will be greeted with this website which is which looks really cool and you can just get started choose your operating system for which you want the flutter sdk for i am on windows here so i have selected windows and let's just click on download the stable version over here [Music] once the download finishes we can go to the downloaded file and extract it you will get a zipped file and you will have to extract the file and here is your statorization now here's the important part we will be setting up the environment variable so just go ahead to this location that is your sdk flutter slash bin copy that address once you have that address copied go to the edit system environment variables through the start menu you can come to this pop-up over here or you can open your properties from my computer and click on these advanced system settings and it will give you the same pop-up once you have this opened just quickly select the environment variables option and in this environment variables option there will be user variables for your username so just go ahead and double click on path and add a new path and this is the address of the sdk that we copied that is sdk flash flutter once you have it just click ok apply and you are done with your setting of flutter almost there you are almost there like so there will be a few more steps to this like go to vs code go to the extensions tab and type in footer now install this first one that comes up in the search result and it will also install dart i guess yes you will need a dart extension as well and i think it will automatically install once you have that installed you can your flutter is integrated with vs code and your system recognizes that thing as well now to check whether the sdk has been installed successfully you can just press ctrl shift and p in your vs code and you can search for flutter doctor here search set command and press enter now it might ask a few things here you can simply press yes so flutter doctor is running here it's written [Music] and once it completes it will show some output and if you just let me just make this a little bit bigger open up this thing and here you can see uh the flutter has been installed correctly we don't have android studio and yeah android tool chain as well but we have vs code setup and we don't have any connected devices so yeah that's perfectly fine now we can easily create our own new project by simply going to control shift p and such is searching for flutter new project enter that project's name let me just enter something hello let's say it hello world and press enter select the location where you want to save that project and press yes and here you can see twitter is already working on creating that project for us and let's give it a couple of seconds here now once that initialization of the project finishes here you can see we have already some sample code from the flutter sdk already written for us and it has some really informational comments on it but if you don't understand what all this code is and how to program in flutter i am planning of making a series on that as well so you can comment down below and tell me what all topics you would like to see covered now if you don't already have a terminal window open now let me just close this terminal window [Music] this is the terminal window i'm talking about this is the debug console output problems and this terminal window let me just close it and if you don't have it open you can always go to the terminal and select new terminal this window will be right there now just write better doctor and just copy paste this command this command is basically for accepting the android licenses that are required for you to start working with proto and you just have to select yes for every license that it will ask you to select for and yes and yes yes and once you have accepted all those licenses you have completely installed footer on your server machine and set it up with vs code and you are all ready to start your project on any emulator or real device that you would like so if you don't know about emulators or how to set up one i'll be making a tutorial on that as well you can find it in the link i button over this video or in the description so i already have an emulator over here so i would simply press ctrl f5 or to run without debugging and in the debug console you would see that it is doing some processes and setting my project up to start it in the emulator and down there you can also see that it has selected my device that is samsung galaxy s10 down there and there are all the panels which we use code as and and you have to pretty much wait over here to make this process complete and here you can see preparing to install licenses and all those stuff once this is completed and let's not open the devtools right now and here you can see your demi project your sample project has been set up correctly and it's working on your emulator so yeah now you can edit this code and select hot refresh or do anything you would like like let's go ahead and change the color to from blue to green so it's a lowercase green here so and when you press ctrl s or save the file it automatically changes and there it's written reloaded the libraries and this is milliseconds so you are essentially done with this thing and if you want to set up the emulators as well i will be having a video on that in the description so thank you guys for watching and make sure to like this video if it helps you [Music] bye you

Channel: Apoorv pandey

Views: 104,808

Keywords: flutter, vscode, how to set up flutter with vscode, how to set up flutter with visual studio, how to use flutter without android studio, how to set environment variables in flutter, how to accept android licenses, how to install flutter with vscode, windows 10, flutter vscode winndows 10, flutter sdk with vscode, flutter with vscode and emulator, flutter tutorial, flutter tutorial for beginners, flutter beginner tutorial

Id: so-k9NOzFwM

Length: 8min 55sec (535 seconds)

Published: Wed Nov 11 2020