Flutter Windows Setup

Academind by Maximilian Schwarzmüller
A free video tutorial from Academind by Maximilian Schwarzmüller
Online Education
4.7 instructor rating • 26 courses • 1,380,025 students

Lecture description

Let's install Flutter on Windows so that we can build amazing apps there - in this lecture, I'll walk you through all the installation steps.

Learn more from the full course

Flutter & Dart - The Complete Guide [2021 Edition]

A Complete Guide to the Flutter SDK & Flutter Framework for building native iOS and Android apps

41:37:31 of on-demand video • Updated April 2021

  • Learn Flutter and Dart from the ground up, step-by-step
  • Build engaging native mobile apps for both Android and iOS
  • Use features like Google Maps, the device camera, authentication and much more!
  • Learn how to upload images and how to send manual and automated push notifications
  • Learn all the basics without stopping after them: Dive deeply into Flutter & Dart and become an advanced developer
English Instructor: So, now, we saw the installation steps for Mac OS. Let's now see how we can set up Flutter on Windows. Therefore, if you are not using Windows you can, of course, skip this video. Now, for Windows I'm again on flutter.dev, and their under the docs under Get started. We can choose Windows and there we find the detailed setup instructions. Now, I strongly recommend that you all to go through these written instructions here. I will go through the entire installation with you in this video, but since of course the setup process could change in one or two details over time, and also so that you have a well written guide those official instructions are a great place to go, especially if you're facing problems or if you're getting stuck. So, here we see the different Windows installation guides, and we start with the system requirements that you should fulfill here. Now, let's start with the tools that you need. Flutter, as you see, depends on two core tools that you should have installed in your Windows environment. For one, that's the Windows PowerShell, basically, a command prompt, a terminal, which allows you to run some commands on Windows, and it's already pre installed on Windows 10 on older versions of Windows seven, and eight. You can install it, just as explained on this page, this link leads to. Now, once you've got the Windows PowerShell set up, I already do have it set up because I'm on Windows 10, we have to install Git. Now, Git four Windows is a version control tool, which means it allows you to manage source code, creates different snapshots of your source code and if you mess something up, you can go back to an older version of your code. Now, this is in general useful for a developer, but it's actually not a tool we're going to use throughout this course, because using it is totally optional, and there are dedicated Git resources if you wanna learn more about it, you can use it with Flutter. Nonetheless, though, even though we're not going to use it here, we need to install it because Flutter and the Flutter setup also needs it under the hood. So, here on this link, Git for Windows, you're taken to the page where you can download it and here, we wanna download Git for Windows which is a tool we can install, simply to the Downloads folder and now wait for this download to finish. Once the download finishes, we can just start this executable, start this installer, and this will open up this installer here and there we can simply walk through it. Now, here, first of all, the default options should be fine. So, you can just go with those as you see here. You can also stick to that default editor for Git whatever is chosen as a default for you her,. This is not too important right now. And now here, that's important. Here on this step we see in the Flutter documentation that we should choose the Use Git from the Windows command prompt option during the installation. Now, here in the installer, we see the Use Git from Git Bash only option which is not the one and we see the Git from the command line and also from 3rd-party software option, which is actually the option we want here and it's also the recommended option here, so it's the option with which we should go here. Let's click Next thereafter. We can keep the defaults here as well and click Next again. Again, keep the default here as well and, again, click Next. Click Next. Keep all the defaults basically, as you can tell. Also on this page, on this page, and finally we can click Install. So, the only important thing really was that Git from Windows command prompt which you should choose correctly, but there as you saw, we also went with the default and this will now install Git this tool which Flutter will use behind the scenes during installation on our system. So, let's wait for this installation to finish. And now, that this is finished, we don't have to view the release notes, we can click Next. Now, one thing you can do right away, is you can open up the Windows PowerShell and in there simply type git and if you type this you should see something like this, you should not see an error, that's the important thing and this means that Git was installed successfully. If it wasn't installed successfully try installing it again, and make sure you pick all the right settings. Also try restarting your system after you installed Git, this might also fix a few errors, where PowerShell doesn't recognize it, even though it's available already. Now, once that's done, we can finally get started with Flutter. So, now we can get the Flutter SDK and here we got a download link, which we again, simply click to download the Flutter SDK so the Flutter tool, basically. This will then be the tool which allows us to create Flutter projects, but also to build those projects and to turn our source code into native mobile apps. So, this is the core tool of this entire course in the end, after all, it is a Flutter course. So, let's wait for this download to finish. And once it's finished you can extract this zip file and now here's where you should pay close attention this zip file contains a flutter folder. Now, anywhere on your system in any path of your choice, for example, here in my case on D, and then a folder which I created which I named development, you should drag this Flutter folder into that path. So, any path on the system where you have read and write access to, so not a system exclusive part, not a path where Windows itself is installed, but somewhere on the desktop or, like in my case, on the D partition, and then, in a brand new development folder, which I have in there. You should drag that Zipped flutter folder into that new folder, and basically extract that file which that you just downloaded into that folder. Now, this can take a while to finish, and as a side note, the Barchart folder which you see here, you can totally ignore that. It has nothing to do with Flutter. That's just my development folder where I have various development tools and projects, and that's just another project totally unrelated to Flutter. So, let's wait for this extraction to finish. So, now the extraction finished, I'm going to get rid of that Barchart folder to make sure it's not confusing you, and with that we downloaded and stored the Flutter tool and now, in the flutter folder we also find a flutter_console.bat file and if we execute this, we actually open up a terminal here on Windows, where we can run Flutter commands. For example, you can type just Flutter in here, and you will get a list of all the commands you can run with the Flutter tool. The Flutter tool is now available here in that console, and we can, for example, use it to create new Flutter projects or also to run projects that we created, for example, to run them on a connected device and to test our app. We're not there yet though. Whilst it's nice that we have this executable that opens this terminal. It means that we can basically only run Flutter commands here, inside of that Flutter folder, after double clicking the file. In reality, we want to create Flutter projects, somewhere else on our system though. This here is just a tool, Flutter, our projects that use the tool should live somewhere else, just as you don't store all your Microsoft Word documents in the installation folder of Microsoft Word, but maybe in a Documents folder somewhere else on your system. It's the same with development and Flutter, we might have our tool here, our projects are probably stored somewhere else. And for that we can go back to the web page. We now completed the download and extraction step here and now we can move on to the Update your path step. Because right now we're only able to run the Flutter command after we double clicked on that flutter_console.bat file, and that's not what we want because this restricts our flexibility regarding where we can use that tool. So, therefore, let's now edit the environment variables on Windows. For that you can open up your start menu, search for env and you should get this Edit environment variables for your account setting here. Environment variables are basically global variables on your system, which configure various aspects of Windows. And, for example here, we can also configure which commands are available in the default command prompt or PowerShell. So, those interactive input environments which we have on Windows. And now, we wanna add our Flutter tool to such a variable to unlock it in the entire PowerShell and command prompt everywhere on the system, and not just after we launched this flutter_console.bat file. For that, here in the Environment Variables settings window, we should check under user variables here whether we have a Path variable. If you don't have it, as you see here in documentation, you should simply create a new variable named Path with the full path to the flutter\bin folder as a value. If you do have it already, as I do, you can double click on it and simply add a new entry here. Now, the entry we add here is the same as if we would create a new Path variable. We go back to the Flutter folder which we extracted before, and there into the bin folder, and now click into the path up there, into this path bar, so that you get a path written like this and copy this full path. Now, we'll go back to the environment variables and enter this path here into your new or existing Path variable and click OK thereafter and with that we can click OK again and now we set this variable. Now, make sure you close all existing PowerShell or Command Prompt Windows you might have open. I have none here. And there after we can, again, open PowerShell, or simply the default command prompt terminal here and in there, we should now be able to run Flutter and see a list of available commands which simply proves that everything worked and that we are ready to run the Flutter tool and now that's the default command prompt, we can run it anywhere on our system. We can now use that to create and run Flutter projects. Now, the first step we wanna do there after is we wanna run flutter doctor, which analyzes our entire system setup and tells us if something is missing. So, if I run flutter doctor here, it will now do that analysis, and it sees that Flutter was installed, but it sees that Android tools are missing that Android Studio is missing, and that we got no connected device on which we could test our Flutter app. Now, we'll need to install Android, to make sure that we can build Android apps with Flutter and will then also be able to spin up a virtual Android device which allows us to test Flutter apps and that of course will be another important step. So, let's continue with that. Unsurprisingly, it's also the next step here in the official documentation, the Android setup. And here the step is, the first step, is to download and install Android Studio. So, let's click that link so then we're taken to the Android Studio page and on that page download Android Studio. A gree to the license agreements here and download it for Windows. This will download an installer which we can execute to install the Android Studio tool on our system. The Android Studio tool is a tool that allows us to write Android code. That's not so important for us because we're going to write Flutter code, not Android, Flutter then, behind the scenes, can be transformed to Android code basically, automatically, but we'll write Flutter code. So, writing Android code is not our number one reason for downloading this. Instead, we download Android Studio because besides this editor to write code, it gives us all the tools you could say, which Flutter uses behind the scenes to generate and build Android apps to prepare them for publishing them to the Google Play Store, for example, all those essential Android built tools are part of Android Studio, which is why we need to download and install it. So, let's now wait for this download to finish before we can then continue with the installation and with setting up Android. So, now the download finished for me, I'm going to click on the downloaded file to open up that installer, which will now install Android Studio, and which will also allow us to install additional Android components, which we'll need to build Android apps with Flutter. So, let's walk through that installer. We wanna install Android Studio, and the Android virtual device here. This is a tool which will allow us to create virtual Android emulators later for testing the app. You can of course also test it on their real Android device, and I will show how that works throughout the course as well. But if you don't own such a device, and even if you do, you want to test it on multiple different devices, and with the Android virtual device tool, you can create different virtual Android phones to test your app on, so definitely install that. Click Next thereafter, and now choose the installation path. You can absolutely go with the default here. I will, however, choose a different folder and install this, in my example, on the D partition under Program Files and their under Android. Now, this path, of course is up to you. That's where I'm going to install it. Click Next thereafter and Install and this will now install Android Studio, on your system. So, let's wait for this to finish and with it finished let's click Next here. Now, thereafter, we can start Android Studio, so we can leave that checked, because now we'll continue inside of Android Studio. So, let's wait for this to start up and the first time you're opening this it should start up this configuration wizard here. Now, let's go through that. Let's click Next here, and then choose Custom here under settings so that we can configure everything. Let's click Next thereafter. Keep that default path for the Java Development Kit, which Android Studio needs. Click Next. Now, you can choose an appearance for Android Studio. It's totally up to you whether you want the light or dark theme. We're not going to write code in there anyways because I will use a different editor throughout the course and I'll show you how to set up that different editor later. So, you can choose whatever you want here. Click Next. And now, here, it's important. You wanna choose the Android SDK, and also the Android SDK Platform here, and there simply keep the default which it checked for you already. In my case that's API 30, but it might be a different version for you. If available, you also wanna install that HAXM, this Intel HAXM thing here, in my case it already is installed, which is why I can't check it. If you can check it, and it's not installed yet make sure you add it. If you don't have this option, don't worry, you can continue nonetheless. Also make sure you check this Android virtual device box here, so that you installed that as well. And then, choose a location for the Android SDK, and here I'm going to choose a different location, I'm going to add this in my development folder, next to the flutter folder and in there I'm going to create a new folder, which I'll name Android-sdk, make sure you pick a name without any white space in it here because that could cause problems and then, simply click Next. You can also keep the default here which would be on the C drive, though. With all those options let's click Next here. We can stick to these defaults here, you might not see this screen if you don't have this HAXM tool available. No problem in that case, no worries. Let's click Next and Finish and this will now download and install all those extra Android tools we need for building and testing Android apps and whilst we're not going to write Android code on our own, Flutter will use these tools, under the hood, to basically convert our Flutter code to Android code, you could say, to build that Android app based on our code. That's why we need to install all of that, and we need the Android virtual device tool which is also being installed to make sure that we can also test our app on virtual devices. Now, let's wait for all those downloads and this installation to finish now. As a side note, this installation process can really take a while, depending on your internet speed, the general hardware you're running on and in general, this really can take a couple of minutes, so don't worry if it seems like it gets stuck during installation, it isn't. Bnow, once this entire installation process finished, we can click Finish here and now we're ready to create a Flutter project. We actually could do that before as well but now we'll also be able to build this as an Android project then, and run it on a real or virtual Android device. Now, let's get started with that and for that, let's create a new Flutter project first of all. So, let's run flutter doctor again to verify whether everything is prepared now. And, at least, if you installed the Android SDK in a non-default directory, as I did it, you will see that Flutter is not able to locate the Android SDK. If you did go with the default path, you will not get this error, of course. The fix is simple, we'll need to add another environment variable which has this name ANDROID_SDK_ROOT. So, let's add it to the system environment variables again and then there environment variables and, now here, under your user environment variables click New. And choose ANDROID_SDK_ROOT as a name and now as a value the path to the Android SDK. So, for me, that's under D, development, and then here Android SDK. I'm going to grab this full path and insert it here as a value for the ANDROID_SDK_ROOT variable. Click OK and OK and restart the command prompt thereafter and in there, again, let's type flutter doctor and see whether this now works. And if we do so, you see that now at least it's one step further, it's checking the Android licenses but it might detect that not all licenses have been accepted yet. To resolve this, simply run flutter doctor --Android-licenses, just as it's saying here in this information output. Hit Enter, and now this will ask you whether you wanna review the licenses. I'll type y for yes here and thereafter you'll be prompted to accept the license multiple times, so I'll just type y and Enter for all those prompts until there are no more prompts left and once that is done, we can run flutter doctor one more time and now, you see, now this works, now the Android tool chain is configured correctly. Now, I'm still getting a warning here regarding the Android Studio setup, but we can ignore that because we're not going to use Android Studio to write Flutter code anyways and this warning is only related to us writing code in Android Studio. We'll use a different IDE for that and I'll show you how to set that up in the next lecture. So, we can ignore this output here and now regarding the connected devices, we indeed have no connected devices yet, we have no device to test our application. So, that will be the next step. Before that, back into the official docs, we see that we basically have two options. We can use a real device, or an emulator. I'll show you the emulator setup in just a second. We'll also work with a real device throughout the course, but I'll come back to that later. For the moment, you can already install the Google USB Driver here though, you can follow the link you find in the official docs and download and install this tool just as instructed on this page. This is all installed through the Android Studio tool, you'll need that to later connect the real device. So, you'll find all the instructions here, you'll need that later once we do run on a real device. For us here, we'll continue with the Android emulator and for that, we'll need Android Studio, so you can just start it, so that you see this starting screen. And, for one, you can go to the SDK Manager here, and verify that you have an SDK installed and I actually don't just want to use the latest one, but also the latest stable one, which is the latest one with a non single character name so in my case Pie, Android 9. So, I will check this and also installed this SDK, because, unlike the latest one, this is more stable, and I wanna work with that I want to have that installed as well. So, let's make sure you check this. You might even wanna uncheck the other one to ensure that all your Flutter code is turned into Android app with that latest stable SDK. In addition, under SDK tools here, you find the Google USB driver which you need to later connect a real device. With that, let's click apply and this will now install these extra tools and uninstall the SDK which we no longer need and we can wait for this process to finish so that we have the finished setup we need, to build Android apps with Flutter. So, let's wait for that. Now, once that's finished, can click OK here and now we're going to work on the virtual device, which allows us to test a Flutter app. For that, of course, we need a Flutter app. So, I'm back in my development folder where we installed the Flutter tool and the Android SDK. And I'm going to create a new folder here which I'm going to name projects, but you can create that folder anywhere on your system, for example on the desktop, wherever you wanna manage your Flutter projects and when I say project, I basically mean an app, and we're going to build multiple apps throughout this course, so you are going to set up multiple projects throughout this course. Now, here, we're gonna start with our very first project, our very first application and we're going to create that app with the Flutter tool which we installed earlier. For that, we're gonna use the command prompt and there the flutter command, but we need to run this command from inside the folder where we wanna create the project, and currently here in the command prompt, I'm navigated into C:\Users, my username, that's not where I wanna create that app. Instead, I wanna create it on D, development, projects. So, to switch there, I'll first of all type D: to switch to the D partition and then there's the cd command, which stands for change directory, to switch into the development folder and then, after hitting Enter, I'll cd into the projects folder there and now we're in the development projects folder inside of this command prompt. So, now, any commands we're going to run will run inside of that folder, and that's important because we're going to run the flutter create command to create a new app, a new project in that place and I'm going to name it first_app. Now, this name is up to you. This is the name of your first project, the only important thing is that it should be one word, and if it consists of multiple words, like here, first_app, those words should be connected with an underscore. Once you have that you can hit Enter, and this will now create this project folder this application folder. You see it here under projects, there is this first_app folder now and that holds the source code in which we're going to work here in the lib folder, the start file, and a couple of config folders. Now, I'll explain everything about the code and about this configuration throughout this course. We're going to write code in there as well, and I show you how to write code and how to set up everything in the next lecture. For now, let's just run this app, because it turns out that the default app created by Flutter is actually something we can preview on a device, so it gives us a little dummy app out of the box. And to run this, we need that virtual device. So, back here in the Android Studio launch screen, under configure, we now need the AVD manager, which stands for Android Virtual Device Manager. Here we can create and manage our virtual devices. You might already have one, but you can also create a new virtual device by clicking on this Create Virtual Device button. Now, here you can choose any template. I'm going to go with the Pixel 2 phone, and click next here. Now here, you need a system image, which is basically the Android operating system which will be installed on that virtual device, and you wanna go with the latest stable one here, which is the latest one that has a real name, and not just a character identifier. So, in my case it's Pie API level 28. I don't have it yet so I need to download it. So, click on Download here, and this will now install this operating system image, which will be used to set up that virtual device later. So, again, another download for which we have to wait to finish and with that completed, let's click Finish. Select this downloaded image now and click Next. You can leave all the other default settings here as they are and click Finish again and this will now create a new emulator. We can now launch this emulator by clicking this play icon here, and this will spin up this virtual device and launch it so that we can run Android apps on it and this takes us back to the application we created, this first app we built. Because, now, once we started this emulator, we can open an existing Android Studio project here from that starting window of Android Studio and there, under development projects, select your first_app project like this. Now, again, we're not gonna use Android Studio throughout this course, we're not going to write code here throughout this course, but we can get started with this here. Now, when I opened this the first time, I'm prompted here whether I wanna install extra plugins, and I'll click on configure plugins here and choose the Flutter plugin which will help us with Flutter development. Though we could also ignore this here because, again, we're not gonna write Flutter code with Android Studio throughout this course, but it also won't hurt if we add it here. So, after adding this I'll restart Android Studio. This will reopen this project thereafter and now with that opened, make sure that you do have an emulator up and running so that you did start an emulator as shown before. If you didn't do it yet under tools you can get back to the AVD manager and launch our virtual device again. And now, you should see it here in the drop down selected. And now you can press that run button to run your Flutter app on that virtual device. Now, this build process which was started on the device can take a couple of minutes when you run it the first time, don't worry about that. And once it's done you should see your Flutter app running on that emulator and you can hit the plus button here to increment the counter. Pretty awesome. Our Flutter app finally running on an emulator, and of course we'll change this app soon. Now, as I mentioned, I won't use Android Studio, as an editor here and therefore, I also want to show you a way of running this without Android Studio. You can do that by going to the command prompt, navigating into the folder where you have your first_app or into this project folder you created, and in there, you can run flutter run. And this will now do the exact same as you did with the command inside, or with the click of the button inside Android Studio, but without you doing it through Android Studio, it will build the app, and ship it to your emulator and run it there. And this is actually how I will run my apps for the rest of this course, since I won't use Android Studio. You can use either approach, however, using flutter run will have advantages like the hot reloading I'll introduce in a second.