Setup Flutter, Visual Studio Code and Android Emulator on Windows - 2021

so in this video i'm gonna go through the flutter installation and also how to configure an android emulator on your pc and we will run our first flutter app both in flutter web and also flutter in android emulator so first you need to go to flutter. i will link everything in the description so you can just go look there for all the links we'll go into get started this guide is for windows so i will choose windows and i'm gonna go download this zip file then i need to go to this site i need to download git i'm gonna get the 64-bit since that's my windows installation i will be using visual studio code for flutter in this guide since that's what i use you use usually we're gonna go download for windows yeah and lastly i'm gonna go download android studio since we need android studio to create an android emulator i'm gonna go i'm gonna wait until everything finishes downloading and then i will be back and we can start the installation all right so once everything finished downloading first of all i will install git i'm just gonna click through it and wait for it to install all right so after we installed gate we can start extracting flutter the flutter zip first of all i'm gonna go into c and create a new folder where i will have my flutter i will call it src or source and i will go into my downloads where i have my flutter zip which i can extract all and i will extract it to the folder that i just created on c yeah local disk c and then we have source i'm gonna extract it there it's gonna take a while because it's it's a pretty big zip file okay so after the flutter zip finished extracting we can go take a look at it we can go into source then into flutter here we can run the floater console but i'm gonna skip that for now i will go into bin and here i need to copy the path to the flutter installation i will copy this and now i need to add it to the environment variables so here i will go into edit system environment variables this will usually ask for your admin password i will go into environment variables i will click on path and here i need to create a new one and i will paste my path for the flutter installation in here i will click ok ok again and with that we added flutter to our our system path we can open cmd and open command prompt and we should be able to call flutter commands from here so i will try to call flutterdoctor from here and as you can see it works now before we edited the environment variables this wasn't possible okay so it shows that we have this version of flatter for you it could be different because you may be watching this video at a different time but for me it's flutter 2.0.4 and then it will show some other like basically checks if flutter is installed correctly okay so we can just close that i will go i will go again into downloads and i will install vs code vs code is what i use for programming in flutter developing with flutter you can also use android studio but i personally prefer vs code so i will show that so i'm just going to click through this and wait for it to install so in order to develop with flutter in vs code we need to go to extensions and we need to install install the dart and the flutter extensions so i'm just going to click installed for the dart extension and also the flutter extension okay so once our dart and flutter extensions finished installing we can go ahead and run our first flatter app for this i would i usually create a folder for all my flutter apps so i will just create a new folder i'm just gonna call it though like development and i will open command prompt and navigate to that folder right now i'm in that folder and i will just run flutter create and then the name of our project so i'll just like first first app just gonna call it first app click enter and wait for it flutter to create our first app which is not exactly an empty uh app it has some like very basic functionality yeah so it finished so we have our first flutter app created we can go back into vs code we can click here we can go into file open folder and then we can navigate there so local disk endo first app and we can create open this folder select folder inside of vs code and we get our first app in flutter all the code is inside the lib folder here you can create subfolders and all that and right now we have domain.dart and this is our first flutter app which is automatically created by flutter every time it's just like a basic counter app and every time we want to run our flutter app we can choose which device we want to run it on and since flutter 2.0 flutter can run on web it could run on web before but now it's officially supported for web so in the bottom right corner you can choose which device you want to run it on here i can choose chrome edge or an android emulator i will show you how to install that in a bit for now i'm just just gonna choose edge you can also choose chrome and i'm gonna right click on the main.dart and click round run without debugging this will take a while running an app from flutter for the first time takes a bit longer every time and so with that we launched our we run our first flutter app this is just the basic one where i can increment the counter and it's running inside of edge with flutter web if you had any issues trying to run your flutter app inside of a browser then there could be many different problems you can try running in again because that could fix it or you can check the description for stack overflow discussion which covers it or you can just not worry about it right now and let's just move on to the android emulator part and it should work there so to set up the android emulator i will need to install android studio all right so here i'm just just going to click through the installation okay so uh in my guide because i don't actually use android studio to code flutter so i will not be messing around with it too much i will just use it for the android emulator so i'm just gonna choose standard i'm gonna go with the dark theme just for the sake of it and yeah this is the main installation for android studio this will actually take a while after that long installation finishes uh we are greeted with this screen for our purposes we'll just go to configure then avd manager and here uh your installation process could create one emulator but if you didn't then you can go into create virtual device and you can choose your device the device you want to use or you can make your own dimensions for the display i'm just gonna choose the pixel 4 xl because that's the one i used in my instagram videos i'm gonna go next then i can choose which android version i want to use i'm just gonna use the newest one and the one that's installed by default right now so i'm just gonna go with that one next in this panel you can choose how the graphics are rendered um if your machine supports it you can use the hardware rendering i'm just gonna use it on automatic and i'm gonna click finish it will create the device for me it's created right here i can run it with the green arrow or i can edit it i'm not gonna actually run it right now because this is inside the virtual machine so i'm gonna go into my normal machine and run it there to show you how it works one more thing before we run it on android i will go into command prompt and i will run flutterdoctor at this point we should have an installed android studio and installed flutter and what it says is that android license not accepted to resolve this run flutter doctored under licenses so we will just run this [Music] and we need to accept the android licenses and now when we run photodoctor then everything appears to be okay even if there are some issues here uh we don't have to worry about it it is still possible that you'll that everything will work but right now everything is fixed so if you have some problems with the android emulator later on then make sure the under licenses are accepted okay so this is my actual windows installation and here when i go into configure avd manager these are the devices i have currently created on my machine and i can just run the pixel for excel with the screen button i can just run it on my screen as i said the first time you are starting the virtual device it takes a bit longer but for me i already have it installed so it should be a bit faster and it is going to launch just like this on your screen and with that you are basically ready to run your flutter apps on this device i will show you that in in a second but do keep in mind that if your computer is a bit slower or you don't it or if it's like overheating or something then it would be much smarter to connect your phone to your laptop and run it on there but if your laptop can handle it then i much prefer running the android emulator on my screen because it is very convenient okay so with that we have our device fully ready you can basically do anything you want with it it's just like your phone you can go on the internet you can download instagram there or do whatever but we will use it with our first app okay so now when we go here into our first app in the right bottom corner we can instead of selecting chrome or h we can select our device in my case that's the pixel for excel in your case is going to be whatever you create right and we can select that you can see that it's selected here and we can run star run without debugging debugging and us the same as before the first run usually takes the longest and with that you run your first flutter app on an android device on android emulator and you can go ahead and start developing whatever you want

Channel: Patrik Horsky

Views: 279,869

Keywords:

Id: -z1DcFsZlpc

Length: 16min 31sec (991 seconds)

Published: Wed Apr 14 2021