How To Run Flutter App in VSCode Android Emulator on Windows 10 or 11 (2023)

hey guys in this tutorial I'm going to show you how to run flutter in Android emulator on Windows most of the steps are identical on a Mac as well I'm going to show you how to run a flutter app in Visual Studio code or basically just on the command line and launch it in Android Studio Android emulator and before we get started I'm gonna ask for one small favorite from you guys which is to leave a like for the YouTube algorithm it does take several hours to put these videos together so a simple like does help the channel quite a bit okay guys now before we run our flutter app in Android emulator we're going to go to Google and install required software first thing you want to do is go to Google and start typing git download Windows go to the download page click on download for Windows button and here click on 64-bit git for when Windows setup now go ahead and click on the downloaded file to install git on your system here I'm going to install git in its default location and program files now here just wait for the installation to complete go back to Google and type Android Studio download go to the official Android Studio website accept the license and download Android Studio here again click on the downloaded file and go through the Android Studio installation process now just make sure to check Android SDK Android SDK platform and Android virtual device check boxes go ahead and finish the installation and you can check if you can run Android Studio but we're going to get to that later so let's go back to Google and download visual studio code if you already have it you can just skip this step but because I'm doing everything from scratch I'm just gonna download my Windows installer click on the file and go through the vs code installation process once the installation is completed I'm gonna make sure I can run Visual Studio code so here it is but I'm going to close that for now now go back to Google and let's download flutter SDK so type flutter SDK download go to the first link in here for Windows I'm going to download flutter Windows 3.3.0 which comes as a zip file so I'm going to go to my downloads folder and extract that file for flutter SDK I've just downloaded into the same folder then what you want to do is go into this folder now go inside and right click on the flutter folder and select copy or cut then go to your C drive and simply paste it in to your C drive directly so you're going to have something like C flutter and C flutter slash bin now go ahead and navigate into C flutter now go into the bin folder and here in the address bar copy C flutter slash bin so we're going to go ahead and add this to our environment variables so it's available throughout the system go to the start button start typing environment variables hit enter now here go to environment variables button in this box here locate path and go to edit now all the way down here you can either double click on the last line or press new button and copy and paste that c flutter slash bin address and click ok now we need to add Android Studio SDK as well so I'm going to go to my command line navigate to users folder with CD command and replace this with your username then CD into app data folder then local Android and SDK so go ahead and copy this and that's the folder we need to add to path here as well so here go ahead and locate path click edit button and at the bottom here again paste that folder that we just got from the command line now go back to the command line and here are the platform Dash tools copy this line and we're going to add that to the path as well so let's go to the path variable again click edit the button and paste it on the last line then click ok ok and okay again so now we're going to test whether a flutter is ready for development I'm going to go to CMD again and type flutter doctor and hit enter now if you see a couple of issues here don't worry about that we're going to fix them in the next step so for example CMD line tools component is missing run path to sdkmanager install an Android license status unknown now we're going to get these errors fixed as we move forward go ahead and open your Android studio and on this initial screen go to the three dots and click on SDK manager so on this next screen that shows up go to SDK tools and on this screen here what you're looking for is the Android SDK command line tools so here go ahead and check this checkbox and click apply button here click OK and wait for SDK to install click finish and then click OK button to close all of this alright guys so now if we go back to our console here remember how we had this error if we run flutterdoctor again that error is going to disappear so now the only error we have here is Android tool chain developed for Android devices some Android licenses not accepted to resolve this run flutterdoctor-android licenses and that's exactly what we're going to do now I'm going to speed this up but as you go through this process just keep pressing Y and enter now if you run a flutter doctor again you'll see that we have no errors so guys at this point we're finally ready to launch our flutter application in Android emulator and the next part of this tutorial is going to show you how to do just that so first I'm going to show you how to set up your emulator in Android Studio go to these three dots then click virtual device manager then click on the create virtual device link now from this list I'm going to select pixel XL but you can select any device you want I already have it downloaded but you might need to click on the download link and wait for a while for that device to be installed now go ahead and click next and finish and here press the play button next to that device and and as you can see it's running in the next example I'm going to show you how to run our flutter app in Visual Studio code with Android emulator from command line in terminal first we need to create our new flutter project so go ahead and CD into the folder where your flutter projects are and type flutter create Hello World now at this point we can simply see D into hello world and run flutter run command but instead we're going to launch our flutter app directly from vs code so go ahead and open your Visual Studio code go to file and open folder we're going to navigate to that folder we just created on the command line so for me it was C projects flutter and hello world so click on hello world and click select folder this will open your flutter project in vs code here under lib folder we have our main dot Dart application now you'll see no device button in the lower right corner go ahead and click on that and in this drop down menu what you want to do is click on create Android emulator now once you click on that you will see this node creating emulator and it's going to take a while to do that but eventually the Android emulator will show up on the screen so just resize it and place it in some convenient spot now because you're writing it for the first time you're going to see this error fail to launch flutter emulator air emulator did not connect within 60 seconds that's totally fine it's not your fault uh we're gonna fix that in the next step so go to your Android Studio again go to the three dots and go to virtual device manager so here go to these three dots and select the option that says wipe data and click yes now let's go back to our Visual Studio code still with that error so you can just close that and go to Windows or devices button here and on this list here click Start flutter emulator now because we chose the wipe data option from the previous step it's actually going to run our flutter app directly in Android emulator live on the screen so go ahead and run your flutter app by right clicking on main.dart and selecting run without debugging or with debugging it's up to you and the first time you build your flutter app it's going to take a while but eventually it's actually going to open in your emulator now at this point your flutter app is running in vs code and here I can press the button in Android emulator and you will see the number increasing at this point you can pretty much start developing any flutter app that you want so for example if I change this you have pushed the button this many times text in this component to do some custom text let's say flutter hot reload and press Ctrl s you will see the app automatically reload in Android emulator

Channel: Ghost Together

Views: 54,541

Keywords: flutter, app, run, launch, terminal, command line, cmd, cmd.exe, windows, android studio, android emulator, vscode, visual studio code

Id: EhGW4UYpKSE

Length: 10min 25sec (625 seconds)

Published: Wed Dec 28 2022