Flutter Installation Guide for Windows 11

미연

·

2022. 5. 3. 14:46

today we want to take a look on how we can install flutter on a windows 11 machine with that let's get into the post so first of all we will have a look how we can install everything via git and get everything done there then we want to download everything that we need like flutter itself and set up the environment variables in windows 11. after that we want to have a look on how we can install android studio what we need to do install with sdk manager with avd manager so that we can start up an android device after that we also take a look into installing visual studio with not visual studio code and with that we can set up everything that flutter can install on windows 11 with a real application for windows 11. and now without further ado let's get started and because my little computer down here which survived for me the last three years is not capable of running windows 11 because of the cpu uh problems i was asking mediamike saturn the company of maghtap if they could possibly send me a device and well they did and thanks to them i am able now to create this post so check out their job description that you can find down in the post descriptions below alright so welcome to this fresh installed windows 11 instance as you can see nothing is on this computer so if i'm opening up powershell and execute flutter or git you can see nothing is installed we get the term is not recognized usually this means that a system variable is not there but in our case it's completely off nothing is installed so let's head over and i prepared already something two websites we need the git scm website which provides us with git there we can download the windows client for git you will find a link down in the post description and the flutter website where we have the windows inst if you go up to get started then you find here windows and underneath of it you find the system requirements i'm pretty sure you match them but then you have two options to install flutter one is by downloading this flutter windows zip file and unpack it somewhere but we want to do it professional so we use git for that so the first step that we will do is installing git so how can we do that we click here on the link and with this click on the link we should download now git and if we have insta downloaded it we are directly started and now the installation process happens and you know how the drill you click next until everything is installed we see us after that step great so we have now installed git on our machine so if we open up powershell and we go into a powershell and execute git once more oh something doesn't work so let's close up all the powershells that's very important to close them all off and now if we open up powershell again and enter git you can see it works now the reason for that is that the installer of windows git is automatically taking care of the system variables perfect but flutter still not there okay now we search for a path where we want to install flutter in our case this is the good old dev folder that i created directly underneath of c which should be now installed with git so if we check that environment there should be nothing but git perfect then we clear our terminal and now we want to install flutter in this directory so for that we switch off to the windows install part and now we select git to stable so you select just that behind the step which says clone and stable if you have never used git before maybe the tutorial where i have used it and explain how git works is useful for you but in the meantime we can now just pass that in and with that we execute that and we clone now flutter that means we download the folders from git into our system and with that we have it installed and we will see us in the next step where we set the system variables great now we have installed flutter and if we check uh this is the folder again we see that flutter is installed but now if we execute flutter nothing works and even if i restart now everything and go back to the powershell execute flutter again it still doesn't work reason for that is that windows system variables and what that is if we search for environment variables environment we find these settings here edit the system environment variables if we open that up and go down here to environment variables you see for example the path here and what happens here you can see git is also part of it this allows all the terminals on windows to execute these commands inside of this folders so that means we have to somehow find the path to our flutter application so we go to def search for flutter and inside of here we have the bin folder and as you can see we have dart and flutter files here inside so if we copy that now over and bring that into our system environment variables where we press new and add them now our terminal has the chance to directly access this flutter from here let's try that we open up a new powershell that is important always restart your powershells whenever you have set up something in the environment variables and after that we can execute flutter great stuff works and it downloads automatically dart for us fantastic so it gets the whole engine everything works after that and we are ready to go why do we install it via git there is a reason for it because now we have the option to switch between the blogs and that helps us if we want to maybe go to the master blog and try to work directly with the newest stuff flutter provides to us there is also a dev blog that i could recommend you which is a little bit more stable than the master blog okay but we let that run and after that we will be back and we talk how we can go further from here alright let's say you had a problem with installing flutter in any case so for example you couldn't set up the environment variables on your machine there is one option that is chocolaty which is a package manager for windows which allows you to install directly packages so for that we will just execute this method here in your powershell which has to be now an administrative powershell so we go to powershell again and call run ns administrator because we want to install something now it will ask you a lot of permissions and if we execute this now it will install chocolaty on your machine so you see a download something it installs chocolatier on your machine tells you a lot of things and now what we can do is call choco in your command line and it will explain you that it is installed now we want to install flutter so choco install flutter and if we do that it will automatically download accept all the licenses and things and with that you have downloaded everything and you have to confirm that once more and we run that script it will take a second it downloads now flutter in the version of 1.2.81 and with that you can also execute everything correctly as you know it before so you don't have to set up system variables you only have maybe to introduce it to android studio and with that you have an alternative path to install flutter on your machine so after the installation you can see that the environment variables have been changed and you have to restart powershell in order to run it with it but even though this is a very convenient way to install packages like flutter i would like to recommend you to say first install it correctly because you learn a lot of things like system environments which is not necessarily only important for flutter but will also be important for other programming languages if you want to go for java or others package managers are very convenient way but it takes you a lot of knowledge away so think about it before you use it great stuff do you know which moment it is right now it's the moment where you can hit the like button subscribe to our blog if you haven't yet as you know that helps us tons also it would be amazing if you can check out our patreon page that we have created down in the post description so you can support our blog even more thanks for all your support and thanks for being here and now back to the post all right so from now on we want to start with flutterdoctor if we have installed everything correctly now it's downloading all the different parts and shows us after that and analyzes if flutter is correctly installed on your machine and as you can see because it's a complete clear machine we see that flood has installed that is fine now we see that there is an android tool chain and there is something missing we need android studio and if the android sdk has been installed in a custom location then we can do something else unfortunately i have not installed the android sdk and we will install android studio for that in the next step also if we would like to work in the web chrome is not installed yet because we use edge for that and android studio is not installed alright so how do we install now android studio alright so android studio we receive if we go to developer.android.com here we can download android studio reading the terms and conditions and if you agree you press that and download the whole thing after the download we will see further as you can see it takes a second so after the download if i open up the file we get to start with the downloader and installer we accept everything and now we press next next and here we choose a folder of our choice we have that in c def right so this pc c f and of course we want to have it on slash android studio and with that we go next and we do not i create shortcuts why not and let's go install okay we see us after the installation processall right now we press next and start up android studio this can take a second depending on your machine we say here do not import and now what happens is it downloads all the things that you need to work with the android sdk so i do not send information to google at the moment we don't need this upgrade and we press next as standard we take the dark theme and here you can see now everything that it downloads like the android emulator the sdk um and everything that it needs so if we press finish it starts to download this information and you will need it if you want to work on an android device we see us after the download so after everything is successfully installed we can start the whole thing and then we navigate to plugins because we want to work with flutter so just to make sure that everything is installed that we need we press here accept because it also installs dart and with that we have to restart the ide and if we are now lucky and everything has worked perfectly fine which i expect we are able to install a flutter project so you see we have now the button new flutter project compress that and with that we can start here if we press flutter and choose the sdk path it's not here yet but if we go to c dev flutter bin now we should be able to see everything working not found at that location okay maybe i have to yeah just remove the bin and go to next here we can choose our first project name as you can see it changes also the project location we can give a description the organization in our case def flutter explained and now with all that we can press on finish and now the project in the background is getting created of course you can now use also the command the terminal if you want to start your first project okay so we get now the flutter boiler plate here so this we can start now and as you can see in a second if everything has loaded we can see the devices up here now at the moment we don't have an android device so you will have to press on the avd manager on top right here it looks like a little phone with an android icon if you press on that you can get the message create virtual device which we will do we choose just one phone i use now here one with a play store installed you can press next you download your system image for the phone i take your r but that could be newer or older depending on what your use case is press next now it downloads again one gigabyte for the whole android device and everything that we will see as after the download good after the download we can now choose the r give the avd a name android virtual device by the way and press finish now if we press that button we start up the device so let's do that so as soon as starter device has been start up you can also choose up here the green arrow which then starts your flutter application already we wait a second and i will show you that it worked great so after a while and don't worry the first time takes the longest so as soon as you have done it the first time it's going faster for every other app and also if you make hot reload it's immediately working right so the app is working and we can work on android fine so we have installed flutter we work on android next step is how can we let that thing run on windows devices so instead of having here an android device we want to let it run as a windows application but before we start with installing uh for insta for windows let's have a look first again on the android tool chain as you can see there are two things that are still important first of all we need the cmd tools latest and the other thing is that we still have to accept all the android's licenses for that we can just execute that command so flatter doctor android licenses i will just copy it down here and remove the rim and start the whole thing and in order to get rid of that first problem that we saw on flutterdoctor here cmd line tools is missing we go back to android studio choose again the avd manager no not the lvd manager next to the avd manager you will find the sdk manager you open up that one you can go to sdk tools and find us the third android sdk command line tools latest you select that one apply and install it after the installation we can say okay and don't forget to restart i don't even know if we have to restart the command line nope works after we have installed it we can see now one error less and the other one is flutter doctor android licenses so let's see if we can execute that and here we see now because the sdk manager is now found the tools are found we can accept all these licenses so and they are quite some so and with that flutter doctor should be clean now okay but now how can we set up it for windowshow can we create a windows application first we have to execute flutter config if we do that we get a lot of information but what we are looking for is enable windows desktop we copy that over and now we say flutter config and we add hyphen hyphen enable windows desktop so now it's setting the value to true and if we say now flutter doctor again it will tell us now information what we need to do in order to develop for windows we have to install visual studio which is currently not installed the link is here or down in the post description and we have to install desktop development we've seen plus plus and all including components just so let's do that next so we head over to the browser enter the address and here we find now these things we take the community version here and now it starts to download we open it up continue but this will take quite probably a while getting the installer ready go go all right so here we have desktop development with c plus plus and we have to install most of it but what is important that you select down here one of the windows sdks for me it will be windows 11 sdk so and with that we press on install and as you see it's quite large with 14 gigabyte so please make sure that you have enough space on your machine so i will wait until everything is downloaded and we will talk after that so after the installation you will be asked to make a restart let's do that so and now we start our powershell again and if we run flutterdoctor we will see now that it is installed correctly and in the meantime i can open up also android studio again because as you see now here's the green tick we have that running if we open up our project now we can see on top of the devices we would see also the possibility to start it in windows so let's see if i'm correct here so we can see the main.dart the devices get it loaded and if we open up that one no device here now we have windows desktop and if we press on the play button it will start everything up but as you can see we don't have the windows folder yet so what we have to do in order to make that possible we go to the terminal and inside of our project we call flutter dot create dot and make execution what happens now inside of this folder where we are it starts to install everything that we need in order to run it on windows so if i click now here you will see that there is a windows folder newly created and this is important in order to start flutter because else you get this error message which says that there is no windows configured for this project all right if you would like to start now nothing would happen the reason is there is an um closed merge request that has been happened 23 days ago of course so it's pretty new so we have to switch to the beta blog for flutter to make it run but there we go here flutter blog better and if we now upgrade to the newest version then it should work fine because it couldn't understand the new version of flutter 22 flutter studio community 22 so with that update it will work hopefully a flutter upgrade and this can take a while i think again probably if you are doing this later this year it will automatically work because then the newest version of flutter will be already integrating this feature all right so if we would start now windows desktop right away it would not work because first we have to say flutter clean in order to remove everything that has been tried to be built in front beforehand but now that this is done we can try to run the application again and now with a piece of luck it will understand everything building the windows application and everything would work smoothly so give me one second and we will see if the application has started all right and with that we see our application running we can make its move the buttons are working fantastic and we can start to develop in windows applications and can release them as soon as we want to perfect all right now you know how to install flutter how set up the system environment so everything can run inside of powershell we were capable to also have a shortcut to install flutter itself then we have installed visual studio