How to install flutter in windows step by step guide

hey everyone today i am going to show how to install flutter in your windows computer to get started go to flutter.dev website once you are there click on the get started button click on the windows logo to get to the windows installation instructions these are some of the minimum system requirements you will need to install flatter on your computer you will need windows 7 or later versions of windows os as for disk space you will need 1.64 gb but it does not include space for ide and other tools so practically you will need about 5 to 10 gb of phase 2 create flutter apps also flutter depends on having these two tools installed on your computer windows powershell and git for windows powershell is pre-installed with windows 10 if you are using your older version of windows you can download powershell from this link if you don't want to install powershell you can use windows common prompt which is pre-installed on every version of windows as for git you'll need version 2 or later if you already have git installed make sure you can run git commands from the command prompt or powershell i don't have git installed so i'm going to download it am downloading 64-bit version setup file if you are using 32-bit version of windows make sure to download 32-bit version setup file next up is downloading the sdk files the sdk file contains dart sdk photo command line tools and all the necessary code you need to create photo apps click on this blue button to start the download we have to get one more file as well which is android studio android studio serves two purposes first you can use it as a code editor second it provides android sdk android sdk command line tools and android sdk build tools which are liquid by flutter for developing android apps go to android studio website and download android studio once all three downloads are completed we can proceed to installing them let's go ahead and open your downloads folder i am going to install git first in the geek installation wizard for most options i'm going to keep default settings in this dialog choose the second option this will override new git repositories default branch name to main instead of master use recommended default settings for all the other options and finish the installation once installation is completed we can check to see if it installed correctly by running git version command open powershell and type git dash dash version then enter you will see the git version you just installed next let's install the flutter sdk files i am using winrar to extract the sdk zip file if you don't have window you can use any archive program that you might have on your computer flutter recommends placing the sdk files in a folder that is directly in c drive also it's important that you do not place the sdk files inside program files or your user folder that requires elevator privileges so following the flutter guidelines i am going to place the sdk files in c drive in a directory called src once the extraction is completed let's go ahead and see the files that we just extracted inside the src folder there will be a folder called flutter this folder contains all the fatter sdk files in order to run flutter commands on windows console we need to add flutter to windows path environment variables to add flutter to the path open start and type env in the search results you will see 8 system environment variables click on it to open click on environment variables select path in user variables and click on edit here we will add flutter's location as a new environment variable go to your flutter sdk folder then open bin folder and copy the location name then come back to environment variable settings click on the new button then paste flatter bin folder location once that is done click ok now to check if the path is working open powershell in powershell type flutter and hit enter you will see a welcome to flutter message now that we have added flutter to the path we can run flutter commands from anywhere on our windows pc let's move on to the next step flutter provides a helpful command called flutter doctor when you run this command it will scan your computer for further installation and displays the report of the status of your installation go to powershell type the command flutterdoctor and hit enter it will take few seconds for the scan to complete in the report we can see that flutter doctor found two issues unable to locate android sdk and android studio not installed to fix this issue we have to install android studio so open your downloads folder then open android studio setup file to start installing android studio i'm installing android studio with default options once the installation is completed click finish it will automatically launch android studio click ok on the import settings dialog box once it's loaded you will see android studio setup wizard click next to proceed to the next page here you can select the type of setup you want standard setup will install a hundred studio with most common settings and options and in custom install we can customize installation settings and components that are being installed select custom install and click next keep java development location to default and click next select the ui theme you prefer on component setup page keep the default selections under studio will download the sdk files to this location if you want you can change it to different location select the amount of ram you like to allocate for android emulator for my computer the recommended size is 2gb it may differ for your computer based on your system configuration so choose recommended size and hit next now we are at the final step android studio will download all these components and install them on your computer click on the finish button to start downloading all the components wait for all the components to finish download it will take some time if you see any prompt like this click yes all right all the components are downloaded also android studio has set up a new virtual device as well click on the finish button now that we have installed android studio and its components let's run photodoctor command once again to see if there are any issues flutter doctor have found one issue it says that android license not accepted it also has the command that we need to run to fix the issue so let's run the command flutter doctor dash dash android licenses it says that sound out of 7 license is not accepted to review the licenses type y and hit enter on your keyboard it will display all licenses in text format let's go ahead and accept all the licenses now if we run flood adapter command again hopefully we will get no issues found message alright we are almost done with the flutter setup let's move on to setting up our code editor open instructions page and scroll down to the bottom of that page click on the setup editor link flutter recommends these three code editors for creating flutter applications i prefer to use visual studio code because it is fast and it has clean interface open vs code download link in a new tab click on that blue button to start downloading vs code once download is completed let's go ahead and install vs code open vs code setup file accept the license agreement and click next i'm going to keep the instruction directly as it is keep the default option for this one too and continue to next step in these options make sure add to path is selected i am also selecting register code as a default editor for supported files once the installation is completed click on the finish button this will automatically launch vs code first we need to install footer and dot extensions on vs code click on the extension button and type flutter in the extension search field select footer in the search results then click on the install button this will also install the dot extension as well to see if dot is installed search for dot in the extension search field as you can see dot is installed alright now we are ready to create flutter application in vs code press ctrl shift p on your keyboard this will open vs codes command pallet in the command palette type flutter in the search results you will see flutter new application project click on it then select your location to save the project i am going to select my documents folder next we need to enter a name for our project i am going to give the name flutter demo for my project after adding the project name press enter on your keyboard to proceed to the next step the flutter extension will create our new project with a pre-built demo app at the right side bottom you might see a notification like this select yes this will add some vs code settings for a better experience editing flutter code since we already have a pre-built flutter app we can run the app on a virtual device to review it on vs code bottom right side you will see the default device that flutter is selected to run the app we can change the device by clicking on the device name once you click on the device name vs code will display list of devices that are available since i like to preview the app on your mobile device i'm going to choose pixel 3a the pixel 3a android emulator was created when we installed android studio clicking on the device name will set it as a default device and launch the android emulator it may take few seconds for the emulator to load while it's running i'm just placing it at the right side i'm going to place vs code and emulator side by side once the emulator is loaded we can preview the app on vs code menu go to run and select start debugging you can also use the keyboard shortcut f5 once debugging is started you can see that vs code is running task called cradle task assemble debug when trying to debug an android app for the first time the cradle task process will take some time to complete it might take like 10 to 15 minutes the cradle task will convert project source files into a single apk file and then install the apk file to the virtual device so when running for the first time it will download some build tools that are necessary to create an apk file once the build process is completed you will be able to see the app in the android emulator here we have a flooded demo app you can interact with the app like you can do on your real android device flutter offers a tool called hot reload when you make changes to the source code and save the file you can see the changes instantly on the virtual device to demonstrate hard reload i am going to change the primary swatch curve from blue to red once i save the file the app reloads and displays the changes instantly this android emulator was created by android studio when we installed it it runs on android version 11. if you want to test your app on a different android version or if you want to test on device like a tablet or watch you can create a new android emulator to create a new android emulator open android studio on android studio welcome screen go to configure and select avd manager android device manager will display the list of devices that are available right now i have only one device which is pixel 3a to create a new virtual device click on the create virtual device button you can select your mobile device from this list of mobile devices clicking the tablet button on the left side will display the list of tablet devices likewise for other android devices i am going to use pixel 4 xl for my emulator after selecting the device profile click next to continue then select the android os version you like to use i'm going to use android version or if you like to use different android version you can download by clicking on the download link once os version is selected click next to proceed to the next step at the verify configuration screen choose graphics settings from automatic to hardware this will use your computer's graphica to render android emulator screen so you will get good performance you can also customize few other settings click on the show advanced settings button you can set android emulator boot type to cold boot or quick boot increase or decrease ram size also you can increase our degrees sd card size if you don't want to use sd card you can select the no sd card option once you verified all the settings click finish alright now we have our second emulator ready to use you can launch the emulator by clicking on this play button if you want to delete an emulator click on the down arrow icon and select delete let's delete this pixel 3a device since it's running we need to close it then click on the arrow icon and select delete i'm going to launch the emulator from vs code so let's close the device manager since no emulator is running vs code selected chrome as a default device click on the device name and choose pixel 4 xl from the available devices once the emulator is loaded click on the rundown debug button to preview the demo app on the new virtual device since photo 2 supports web let's see how the app looks on your browser after closing the android emulator chrome will be set as the default device on vs code you can run multiple devices and preview your photo app on all devices at once i will show how to do that on another tutorial clicking on the run and debug button will launch chrome and display the app as your web page you can make changes to the source code and see the changes immediately on chrome 2. i hope this video was helpful for you for more videos like this click like and subscribe to my channel thank you for watching

Channel: Tony David

Views: 353,613

Keywords: install flutter windows android studio, flutter android studio install, flutter android studio setup, flutter sdk path windows, flutter doctor, flutter tutorial, how to install flutter in android studio windows, how to install flutter plugin in android studio in windows, flutter sdk path android studio, flutter vscode, install flutter vscode windows

Id: tun0HUHaDuE

Length: 18min 36sec (1116 seconds)

Published: Fri Apr 16 2021