Flutter macOS Setup

A free video tutorial from Academind by Maximilian Schwarzmüller
Online Education
Rating: 4.6 out of 5Instructor rating
43 courses
2,340,141 students
Flutter macOS Setup

Lecture description

Let's get started with Flutter! Time to install it - in this lecture, we'll walk through the installation on macOS.

Learn more from the full course

Flutter & Dart - The Complete Guide [2023 Edition]

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

42:10:03 of on-demand video • Updated November 2022

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
Maximilian: Now you can use Flutter and build apps with Fluter on macOS, Windows and Linux. In this video I will show you how to set up Flutter on macOS. In the next video, I will show you how to create a project on macOS with Flutter and how to set up the development environment, where we will write our code. In the lectures thereafter, I'll show the same for Windows. So if you are using a Windows PC, you can of course skip this and the next lecture, since they don't apply to you. Now, if you are a macOS user, it all starts with visiting Flutter.dev On this page, you can click on docs and there on get started. And then here you can choose your operating system, here you also find instructions if you use Linux or Chrome OS which you can use as well. Now for us, of course, macOS applies. Now you can always check out the official documentation here to find detailed written instructions, which you can use in addition, or instead off this video. But of course, I will also just walk through these steps together with you. It is worth pointing out that at the point of time, I'm recording this, you might wanna check out these extra resources if you are on a Mac that uses the relatively new M1 processor. Now, the Flutter team is working on improving support for this processor, so this might not apply in the future anymore, but if you are facing any issues and most notably, if you still see this box here on this documentation page, when you are visiting it, then you might wanna check out these extra notes to avoid problems when using Flutter on M1 Mac. Now, no matter which kind of Mac you are using, what you will need is you will need to meet these system requirements here and most notably you should ensure that you have git installed, which is an extra tool. We'll do that in a second and you have to have Xcode installed. If you do have Xcode installed, that includes this git tool so then you don't need to install it separately. You can install git separately if you want though, and you can just follow this link to do that. Now here on this page, you will find different ways of installing git, again Xcode has it installed. You can use a homebrew if you've got that installed, or you simply download that installer, which will give you a well installer interface through which you can walk to install git with help of that, whatever you prefer. Now, I did already install git on my system and any ways as mentioned multiple times, you get it together with Xcode anyways, but you should ensure that git is installed on your system in the end. git is an extra tool which you can use for managing source code and different versions of source code and the Flutter SDK uses git under the hood, which is why you need to install it. Now you'll also need Xcode. That's an extra tool, which you can only use on Mac systems, not on Windows or Linux, and it's still official development environment provided by Apple for building iOS apps. Whilst we won't use it to write code, Flutter does need Xcode under the hood to build apps for iOS, that's why you need to install it. Now to install Xcode, you just can open up the app store on your Mac system and search for Xcode there, and then simply install Xcode from there. I already do have it installed, you can easily install it from there. Once you did install Xcode, you got all these prerequisites and we're now ready to install Flutter. And for this you should find a download button here on this page. And of course the exact version you are seeing here will differ over time, but what I teach in this course will still apply no worries. So you can then simply just download this Flutter macOS bundle here, this zip file, and this can take quite a while since it is quite big. And once you did download it, you can extract it and then continue with the next steps. We'll do this together, but for this I'll first of all wait until the download finished for me here. Now, the download did finish for me, and I am extracting this zip file now, which contains the Flutter SDK, that's what we downloaded here. And that in turn also already includes the Flutter framework then, and once that finished, you have a folder that looks something like this from inside. Now that is Flutter downloaded on your system, but how are we using this downloaded code now? Well, that's where the next steps come into play. We did unzip the file already, so that worked, but now we wanna also move it to a desired location where Flutter this SDK should permanently be stored on our system, if you didn't do that already. Now, in my case here, I did create a SDKs folder in some global development folder which I have on my system and in there all at a Flutter folder. Now I will move all the files and folders in this extracted folder into this Flutter folder. Very important, I'm also moving some hidden files here. So you might wanna make sure that you can see hidden files before you move everything. On Mac you can show and hide hidden files by pressing command + shift + . If you hit that you can toggle the visibility of hidden files, and you wanna make sure they're visible before you move your content. Now, I got these Flutter code files in a global place on my system, and now next we need to update our so-called path, which is important to ensure that we can use a Flutter command in our system terminal to then create projects or build apps, however, we'll not add the path like this, but instead we'll update it such that we don't need to ever do that again. Like this you would have to repeat it every time you restart your system basically, and there is a better approach. So we will jump to update your path and follow the steps shown here. Now here you can see that we first of all need to locate a global configuration file called .bashprofile or .bashrc or on newer macOS systems .zshrc. So here I'm in my root user folder. And in there I've got a bunch of configuration files and I also got this zshrc file here. Now I will open that with my standard text editor. And in there I added this line here. That's also the line you find here in the end. This line, that is what you wanna add in your .zshrc file. Here I added it at the very top, and you'll just wanna make sure that you in the end, do add the path to the bin folder in that global Flutter folder you created before. You can easily get that path by going to that Flutter folder and then to the bin folder and right clicking on that bin folder and click get info. Then you get this info window here and you can copy this path here including users and Flutter. And use this path here in front of bin. Just make sure that you add slash bin at the end. Once you did that you can close this config file. Of course, make sure that you did save it. And you can now open up your regular system terminal. So the default terminal app which is installed on every Mac. Here, I opened it on my system I'm using the dark mode, later in the course, I'm also occasionally using the light mode, but here it's the dark mode. And now in there, you should be able to run Flutter. Now, if you run this, you should get a list of the available commands. If you get any other error like command not found, then you need to double check that you did set up your path correctly. Maybe also try restarting your system after updating the path. If you did set up everything correctly, then you should be able to see these commands here when you run Flutter in your terminal. And that proves that you did successfully install Flutter. Now, once Flutter was installed, we can continue with setting up everything we need to set up to build iOS and Android apps. For this we've got the platform set up a point here where we have the iOS set up and the Android setup. Now regarding the iOS setup, you need to install Xcode and we already did that, so this should be done. But now you need to run these two commands in your terminal after installing Xcode. So just copy these commands and then in your terminal, where we tested Flutter before, simply copy in these commands hit enter, and you might be prompted to enter your system password here. So the password with which you also log into the system, and then eventually this should finish. You might see more output here and it might take a bit longer because I already did run these commands in the past for you it might now go through certain setup steps, but ultimately these commands should finish successfully. You also might need to accept the Xcode license agreement for that you can either open Xcode and you should be prompted there. Or you run this command here in the terminal as well. And then you see the license agreement and you can hit space a couple of times to jump to the end of that agreement. It is quite long. And then at the very end, you wanna type in agree because you have to agree in the end. And once you typed agree, you can hit enter and you're done with that as well. Now we are ready to build iOS apps with Flutter and most importantly, we can also set up an iOS simulator now. We can start an iOS simulator on which we will be able to preview our Flutter app. And you can start such a simulator, which is basically an iPhone emulator running on your machine by running this command. So here I'm running open -a Simulator. And now what this does is it opens this iPhone simulator on your system, on your Mac here. So it's a virtual iPhone, which you can use for testing your application so that you don't constantly have to send it to a real iPhone device. You can do that as well and I will show you how to test your application on a real device as well throughout the course, but for development, it's much easier if you use such a virtual device since well, it's much quicker than plugging in your real device and sending the app over the wire. Now starting this simulator can take a couple of seconds. So let's simply wait for that to finish here. And here we go, it did now start up successfully. Now for the moment we don't need it, but we will use it from the next lecture on to run our Flutter apps on emulators like this. And I'm saying like this, because of course iOS is not the only platform we can build for, Flutter also supports Android. So now that we did set up this iOS emulator, before we create any Flutter app, we will set up an Android emulator and I will ignore this part about real iOS devices for now, because we will come back to that later. So for the moment, I'll just jump ahead to Android setup. Now for building apps for Android, we need to install Android studio, which is basically the equivalent to Xcode. So for this, we can follow this link to be taken to the official Android Studio page. And on this page here, we can then download Android Studio. And I guess agree to these terms here and then download Android Studio onto our system. It's also a rather big file, so it can take a couple of seconds or minutes until this is finished. So now the download finished, and if we open this, we'll get an installer, which we can now use to install Android studio. So here it's opening this downloaded file for me and here's the installer and of course this being macOS the installation process is all about dragging Android studio app into the applications folder. And this will now copy over that tool into applications and once that is finished you can of course start Android Studio. Now, as a side note, you can close the Android Studio page now, and just as we won't use Xcode for writing code, we also won't use Android Studio, though you could use Android Studio for Flutter development, because since Flutter is by Google and Android Studio is by Google they do have built in support for Flutter, but I will show you a different IDE, which is free to use, which in my opinion is a little bit more lightweight and foster and simply better for Flutter development and we'll set up and use stats tool in the next lecture. So for the moment we won't use Android Studio for anything else than being able to build Android apps with help of Flutter. Now, in order to be able to do that though, after installing Android Studio, you should start this Android Studio app, which you just downloaded and installed. And if you just installed Android Studio for the first time, you should get this setup wizard. Now let's walk through that wizard together. Here I wanna choose custom, those standards should also be fine, but I wanna be able to fully customize my setup and I'll keep this default path here because the default path should be fine. And then you can choose a theme which doesn't matter too much since we won't develop in Android Studio anyways, but I'll go for the dark theme. And then very important make sure that you install Android SDK here and then also at least one Android API. It should by default give you the latest version, which in my case is 30 here. So you wanna install that as well. If you can also select is Intel Haxm tool here. In my case, it is already installed, that's why I can't selected, but if you can select it, make sure you do, if you can't, it's no problem, but it can help with running the emulator and make sure you have this Android virtual device thing selected because that's what we need to spin up emulators later. Now I'll then click next and then finish and this will now download and install all the different tools and SDKs, which Android studio will need under the hood to build Android apps and Flutter will then later leverage Android Studio for building your Flutter code as Android apps. So let's wait for this to finish and as everything this can take a couple of minutes. So now the setup finished for me and in case you didn't get that wizard, or you wanna change something after the set up, you can always go to this SDK manager here and open that through that starting menu for example, you can also open it from inside Android Studio and here you can also install missing pieces. You can select different Android versions, select them here, and if you then click, okay, that will be installed. Now we don't need it though, because we went through that setup. And therefore I will go to the AVD manager by clicking on configure AVD manager. That is the manager that allows us to create emulators, which we can then launch to test our app on. What we also did for iOS, there we didn't need to create it here we do, so I will just go there and you might already have some virtual devices, some emulators here. If you don't, you can click on create virtual device and then create a new device a new virtual emulator and well, it's up to you what you wanna pick I'll pick a pixel free here. You wanna check that PlayStore is selected here. This unlocks some extra capabilities that can be helpful later on like using Google Maps is on. So I'll make sure that this is selected, click next, and then choose my Android version that I wanna install there. And here I actually wanna use Android 11 so I will download that latest version, which is missing in my case, R I clicked on download and I will download this system image now, which again can take a couple of minutes. And now that that finished, I can actually select this system image to get that latest Android version, click next, leave these defaults click finish. And this will now create a new virtual device. And once this was created, we can click on this play button here to launch this emulator, just as we before launched this iOS device emulator. Now we're launching an Android emulator. Now this as everything you're can take a couple of seconds or minutes until it's ready, but eventually it should be starting up here and you can always change the size just as I did it for the iOS emulators. And it will now boot up. Here we go. The operating system is starting up on this virtual device. And now once this did finish starting up, we can also run Flutter apps on this virtual device to preview them there. But that's what we're going to do over, well, the entire course, but specifically also in the next lecture, when we are going to create our first Flutter project and dive into some Flutter code, because now we did install Flutter, and the tools we need to build cross-platform mobile apps on macOS and the tools we need to tested those apps. Now to finish up this set up process now I wanna validate everything was installed successfully. And to validate this, you can go back to your terminal and there run Flutter doctor, which is a command that analyzes your setup and shows you any potential central problems you might be facing. And if I run this it's first of all, downloading some extra tools that this command needs, but once that's done it will analyze my setup and then show me a little output with a summary of my setup and any potential problems I might be facing. And indeed here I am facing some problems. I do have Flutter installed, but for Android, I need to accept some licenses. And for Xcode you see that some tool which Xcode uses under the hood CocoaPods is out of date and they might wanna update it. Now, conveniently this command Flutter doctor typically also shows as a ways of solving these problems. So for example, regarding the Android licenses, we should now run this command, Flutter doctor --android-licenses. So that's what I'll do. I'll copy that down there and run this command. If you should be getting an error when trying to run this, like I do here with this XML schema, then the workaround is quite simple. You can again go back to Android Studio and there open the SDK manager, which we used before as well. And here under appearance and behavior, go to system settings, and then Android SDK, and here go to SDK tools and choose the Android SDK command line tools, then click, okay and this will now download this extra utility onto our system and install it. So let's wait for this to finish. And once this finished click finish here, close your terminal and then restart it and now again run Flutter doctor --android-licenses. And now this should succeed and it does now accept all those Android licenses. Now, if I run Flutter doctor again, what should happen is that now this time I get no more problems related to Android. Regarding Xcode I do and here I might wanna update my CocoaPods version, and we can do that by following these instructions here. So you can just open that link in a browser and you should be taken to this page and here you wanna run this command in your terminal now to install the latest version of this CocoaPods tool, which Xcode uses under the hood. So I'll just do that quickly. You might be prompted for your user password. So the password which you use for logging into your system, and I did enter this here and now this will be installed. Let's wait for this installation to finish. Here we go. It finished for me. And now if I run Flutter doctor again, I'm not getting any issues anymore. Now you might still get issues or warnings here. And for example, VS Code is a tool I have installed, you probably don't. But if Android Flutter and Xcode is fine for you, then you should be good. Android Studio should also be good, then you should be good. If you got no connected device here that's fine because you might not have an emulator up and running anymore. You can always restart them as shown to you in the previous minutes. And then as soon as you do have an emulator up and running, this should be checked again. And therefore you should be fine if you have no problems related to Android, Xcode or Flutter itself. If you do face problems here, you very often will find the solution right here in that output as you just saw for the steps before. So definitely then try the solutions proposed there. And therefore let's now move on to the next lecture where we will now set up our development environment, create a first Flutter app, and you will see how you can then run this Flutter app on an emulator and how you can even change the code a little bit to then see how code changes are reflected on the running emulator.