Flutter macOS 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,391,697 students

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 [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 let's install Flutter then. And the installation actually differs between Mac OS and Windows. For the rest of the course the code we write and so on will be the same. But here for the installation, it differs. So therefore, in this video, we'll set up Flutter and all the surrounding packages and dependencies we need for Mac. And then the next video, we'll do the same for Windows. So if you are a Windows user, you can simply skip this video. And if you are a Mac user, you can skip the next video. So let's proceed with the Mac setup then. on Flutter.io, you can simply click on get started, and then choose install on Mac OS. By the way, if you're on Linux, the steps are pretty much the same. But you can also click on install on Linux, to see them in detail. And that's in general what I would recommend. Go through these steps in detail. The good thing is you can read them here. And I strongly recommend, following along here and reading these, whilst you also watch this video, or whilst you are going through the installation process. Because A, some tiny steps could change over time. And B, this is a great way of resolving issues, since there might be something you overlook in the video. Which you can then simply read about in this article. So let's continue. First of all, let's check the system requirements. Well, we need the operating system, Mac OS obviously. Enough free space on our disk. And then we depend on these command line tools, which actually should all be available by default. Now Git might not be, so it's a good idea to download it before you get started. You can simply search for Git on Google, and then actually pick that first, or actually that second link to find the downloads page. And there simply choose Mac OS or Linux, depending on what you're on. And then, the download should start automatically. If it doesn't, you can simply click here obviously. And this will download an installer, for which you can simply work to install Git. which is a Version Management System, on your machine. Now you don't need to use that Version Management System, but Flutter uses it behind the scenes. This is why you need to have this available. Once you've got Git installed, with the help of that installer you can download. Which I showed you a second ago, you can proceed with these steps. And the next step is to actually download Flutter. Now, at the point of time recording this, the latest version is 0.3.2 beta. Chances are that when you're watching this, there's a higher version available. But the code we write will still be the same. So download the latest version you're seeing here of course. Now I'll go with this one. Simply download it to your machine. And this can take a while, as you can see it's quite a big file. So I will jump forward, to the point of time where this already is downloaded. The installation just finished for me, you can now simply unzip this. And you can do that with the command you see here, or simply well, click on that downloaded file. Simply open it in the folder where it was downloaded. Simply click on it down there. And then unzip this. Now this can take a couple of seconds of course, since it's a rather big file. Once it is unzipped, you have this Flutter folder. And now you should copy this somewhere, where do you wanna store this. Now this Flutter thing here, is an entire tool set. It's the SDK, the Software Development Kit, you need for developing Flutter apps. It includes a lot of dependencies Flutter needs. So this is really a central package of program, you should store in your machine. And you can copy it wherever you want on your machine. Now I got that tools folder, where I wanna have it. So I'll just drag it over there. And now with Flutter added to that folder, we can proceed with well, the installation or with using it. So the Flutter tool, is actually a tool we execute from the command line. Therefore, we need to add it to our path. The path is basically a global variable, which ensures that the Flutter program, or which ensures that any program, can be accessed through the command line. And we wanna configure the Flutter program to be found there. Now to be found there, we could execute this command in the command line. If we navigated into the newly created Flutter folder, or we do something which is seen a little bit further down the article. Here, we update our path permanently. Now how does that work? For that you should go into your user folder, and there you need to turn on the setting to see hidden files. You should then see that bash profile file. Important if you're on Mac OS Catalina or higher, It will not be a bash profile file, but a .zprofile file. It fulfills the same purpose, it's just a different name, and you should then edit that file. Another important note, if you see neither of these files. If you don't have such a profile file, whatever name it is for your Operating System. You can simply create it. Simply create a Text file, insert what we're about to insert in the next seconds, and then save it under .bash profile, for Mac OS older than Catalina, and .zprofile for Mac OS after Catalina. Now you can simply open that, with the normal Text editor app, or with any Text editor of your choice. If you're using the Text editor app, just make sure you're viewing this in plain text mode, not in rich text mode. So if you open this then. Let me make this a bit bigger. You can edit this file. And this basically configures path settings, for your terminal. For your command line tool on Mac or Linux. Now, we wanna add something here. We wanna add this line, which you can find in the installation steps. Simply add it at the bottom. And we need to replace this part here, with the actual path. The folder path to that Flutter tool on our machine. Now that of course depends on where you dragged it. For me, it can be found under users, then my username, then there's a development folder. And then there I created a tools folder. And again, you really have to pick your path there, where you dragged that Flutter tool. Can view that also by clicking on get info here, then you can see where it's found. In my case users, my user name, development tools. With that, simply save that file, and thereafter open your normal terminal app on Mac or Linux. Once you did open that, you should be able to run Flutter doctor. Now this is a tool which will also check, if you need to do something to make Flutter work. And it should at least do something, if you set up your Flutter installation correctly. By the way, the fact that my installation is 30 days old, we can ignore that here. Because we know we just downloaded the latest version, 0.3.2 in my case. So this is all fine. Now this is already looking quite good here, because I actually have a decent setup. I'll still walk you through the remaining steps here though. So we updated our path. We now ran flutter doctor too. Now what we need to do is, we need to configure our system to be able to build iOS and or Android apps. For that, If you wanna build iOS apps. If you wanna test your app on iOS, and ultimately build it for that platform. You need to install Xcode. Which is Apple's development IDE, but also a absolutely required tool for building iOS apps. Even if you use Flutter and no native code for that. So install Xcode, by downloading it from the Mac App Store. And once you got installed, you need to make sure that you can use, the so called Xcode command-line tools. And this can be done by simply copy and pasting, this command into your terminal. So you can simply run this. You might be prompted to enter your password there. And then it might or might not do something, depending on whether you already configured this. It might prompt you to accept the license. Once you've completed this step, you can continue to step number three. And execute this command, to accept the license agreements of Xcodebuild. Which is the build tool we're going to use. Now here we can simply scroll to the bottom, which can be sped up by hitting space a couple of times. And then type agree down there. Now with that out of the way we can continue. And we can bring up the iOS simulator. Which simply is iPhone running on our machine. It can be started with this command. You could also start it from within the Xcode by the way. But I will simply start it with this command. Open dash A Simulator with a capital S. And now what this should do, is it should bring up this iOS simulator here. Now this is the device running, you can change the type of phone you're emulating here, from that menu device, and then iOS, and then choose your favorite device here. And now with that up and running, what you can do is, you can start your Flutter app. By running Flutter run in the command prompt. Now for that, we need a Flutter app though, right. Because right now we only install Flutter, but we haven't set up a Flutter app, a new project. So let's quickly do that. And for that, you should first of all navigate into the folder, where you want to create your Flutter app. Once you navigated into that folder, where you want to create your new Flutter project. Run, Flutter, create, and then the name. For example, first underscore app. Important, this project name must not contain dashes or white spaces. It should be using underscores instead, or it will be one word only. Hit enter, and this will now set up a new Flutter project in that specified location. A new sub folder which holds that project to be precise. Can take a couple of seconds. And once it's done, you can navigate into this newly created folder. In my case, it's named first underscore app. And then hit Flutter run. Enter this, hit enter. And with the iOS simulator up and running, you should be able to see that Flutter app on that iOS simulator momentarily. The first build or the first time you run this, can take a couple of seconds longer, by the way. Here we are. Now important, keep that process running, don't quit it. You could quit it with Ctrl + C, but you wanna keep that running, so that you can always rebuild your project, and instantly ship that new version to the device. Whenever you change something in your code. So with that, you should see this. Your first Flutter app running on the iPhone. And you can hit that plus button, to see a counter that is incremented. This is an app the Flutter tool created for you. We of course didn't write any code yet. Now that's cool. And we will actually edit this a little bit, to see how we can well, work with that first Flutter app. But obviously, we also wanna build for Android, right. So let's go back to these installation docs. We're done with the iOS setup here, the simulator at least. Now if you wanna deploy to a real iOS device, you can follow these steps here. You will essentially need to plug in your real iPhone. Then also again, execute these steps to install Homebrew, and then these extra tools which you need, to be able to ship your app to a real iPhone. And once you're done with that, you can continue with these steps. And you will need to do some tweaking in Xcode, to be able to ship your app to your real device. Now, that is something I'll come back to later in this course. When we will actually test this on a real device, and also deploy the app at the end. But again, feel free to already go through these steps. They're really simple, if you wanna run this on a real device. Now I'll move on to Android for now. And for that we will need Android Studio. Just like Xcode is the official IDE, and contains all the build tools for iOS apps. Android Studio is the same for Android. So click that link to be forwarded to the download page of Android Studio. And on that page, it should automatically present to you the Mac OS download. So you can simply hit download Android Studio here. Accept these license agreements and well then download. Store this in any folder of your choice. And this again, is a little bit of a bigger file. So let's wait for this to finish before we continue. Now the download did finish. You can then simply execute that file, and it will launch an installer for you. But we also close the iOS simulator here. Now that Android Studio installer is pretty straightforward on Mac. Just drag that into that applications folder. And this will copy or install that tool in that folder, which again will take a couple of seconds, since it also unpacks that folder. And once you're done with that, let's go back to the Flutter installation page. Once you're done with that, you need to start Android Studio, and go through the setup wizard to configure everything and install everything you need. Now you could also be getting a security warning, that the opening of Android Studio was blocked, because it was from, well, from the internet, not from an identified developer. You can then open it anyways through the Mac security and privacy settings. And ultimately, this should bring up this setup wizard. Now click next on the first screen, click custom on the next screen. Next again, now here you can choose your editor theme, if you wanna have the light or the dark one. You don't need to use Android Studio as an editor for this course. And actually I won't, but you can, so I'll go with dark color here. But that is totally up to you. Now on the next screen, make sure to also check Android Virtual Device here, under the installation options. The default installation path then should be all right. Click next, and finish. And now this will download a bunch of things, and install all the SDKs and tools, you need to develop Android apps. And these will be used behind the scenes by Flutter, which is why we need them. So let me fast forward until this is also done. Now, by the way, this take a couple of minutes, so don't worry if it takes a bit longer. It downloads and installs quite a lot of things. Now the set up finished for me here. So let's click finish. And thereafter, you can click on open an existing Android Studio project. Now there simply navigate to the folder, where you just created your new Flutter app. In my case, that's that first underscore app folder. Select a whole folder and click open. And this will bring up Android Studio with that project open. Now when you open it for the first time, it will actually scan that folder. So let's wait for this to finish. And it should actually suggest to you two things. Down there, it finds something about a plugin. And there, you can simply expand this, and click on configure plugins. It actually also shows you something about the Dart files, we ignore this for now. So now choose that Flutter plugin and click Okay. And thereafter click yes, to also install that Dart plugin for which it's asking up there. Thereafter, simply restart. Now once you restarted, you may get a message at the bottom here, regarding IDE and plugin updates. If you don't, that's fine too. In my case, I do get one. So I'll simply update now, to install the latest versions of all the SDKs, and build tools I might need. And that again, will get downloaded. Which again, will take a couple of seconds. And now with all that done, let me click finish here. And now this is our Flutter project. Now I will open this in a different IDE, where it's also a bit easier to read. In a second, for now we won't work on that code here. Instead, let's run this on an emulator. For that, we can simply go to tools, and then AVD Manager. That stands for Android Virtual Device. Let's open that tool. And here I actually got some pre-configured devices. You should at least have one, that Nexus or some other device, which is created with the installation. You can always create a new virtual device, by clicking that button here at the bottom. And then you can choose which device you wanna use. Let's say the Pixel two. Continue, choose your API version. Now typically, the highest one is a good choice, or the one selected by default I should say. Not necessarily the cutting edge one, but this one. Click next again. Now here on emulator performance, you should choose the hardware emulation for a faster emulator. The other settings should be fine. Simply hit finish. And this should create that new emulator. And you can then start it, by clicking on that play button on the very right here. Now this will bring up your Android emulator. Now we can of course use that emulator, to run our Flutter app there too. And to run it, what we need to do, is we need to go back to that command line. Where we previously already ran it on the iPhone. And repeat that Flutter run command. If you still got the old one running, which you probably don't have if you shut down the old simulator. You can always quits the running process with Ctrl + C. So let's hit Flutter run, to run it on our Android emulator, once that emulator did boot up. And it will build the project with the help of the Android SDK, that was installed together with Android Studio. And that first build process, can again take a couple of seconds. Subsequent ones will be faster. And now it should be up and running. Let's view it, and there it is. This is our device, and this is our Flutter app. And we can click the plus button to increment this counter. Awesome. So this is how we install Flutter, and run it on both the iOS and Android emulators. Now if you wanna run it on real devices, you can follow the steps outlined in the documentation. But of course, we'll also run it together on the real device later in this course. For now, let's focus on the editor, with which we're going to work on this code.