Flutter macOS Setup
So let's install Flutter then and the installation actually differs between MacOS 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 in 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.i you can simply click on "Get started" and then choose "Install" on MacOS.By the way if you are 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 MacOS 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 is 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 MacOS or Linux depending on where you are on and then the download should start automatically.
If it doesn't you can simply click here obviously and this will download an installer through which you can simply walk 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. you 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 that I'm 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 Futter folder and now you should copy this somewhere where you want to store this. Now this Flutter thing here is an entire toolset, 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 a 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 want to 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 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.
Now you can simply open that with the normal text edit app or with any text editor of your choice.If you are using the text edit app, then 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 it 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 want to add something here. We want to 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 the 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 is 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. You can view that also by clicking on get info here, then you can see where it's found. In my case users or username, development, tools. With that simply save that file and thereafter open your normal terminal app on Mac or Linux. Once you did open it, 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 want to build iOS apps, if you want to test your app on iOS and ultimately build it for that platform, you need to install X-Code which is Apple's development IDE but also an absolutely required tool for building iOS apps even if you use Flutter and no native code for that. So install X-Code by downloading it from the Mac App Store. And once it got installed you need to make sure that you can use to so-called X-Code 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 X-Code build, which is the build tools we're going to use. Now here you 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 the way we can continue and we can bring up the iOS simulator which simply is an iPhone running on our machine. It can be started with this command, you could also start it from within X-Code by the way. But I will simply start it with this command:open -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 own you Flutter project run flutter create and then the name.
For example first underscore_app. Important: This project name must not contain dashes or whitespaces, it should be using underscores instead. Or be one word only. Hit enter, and this will now set up a new Flutter project in that specified location and use subfolders which hold that project to be precise. Could 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_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 built 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 want to 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 firs Flutter app.
But obviously we all want to build for Android right?
So let's go back to these installation docs, we're done with the iOS setup, 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 are done with that.
You can continue with these steps and you will need to do some tweaking in X-Code 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 rea 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 want to 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 X-Code is the official ID and contains all the built 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 you the MacOS 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. Let me also close the iOS simulator here. Now and 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 are done with that let's go back to the Flutter installation page. When you're done with that you need to start Android Studio and go through the set-up 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 an 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 set up wizard. Now click next on the first screen, click custom on the next screen.
Next again, now here you can choose your editor theme you want to have the light or 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 darcula 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
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 can 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 setup finished for me here so let's click Finish and thereafter you can click on open an existing
Android Studio project.
Now they're simply navigate to the folder where you just created your new Flutter app. In my case that's that first_app folder, select the whole folder and click Open. And this will bring-up Android Studio with that project open. Now when you open it for a first time it will actually scan that folder. So let's wait for this to finish and it should actually suggest you two things down there. It finds something about a plug in and there you can simply expand this and click on configure plug ins. It actually also shows you something about the Dart files, we ignore this for now.
So now choose that Flutter plug in and click OK and thereafter click yes to also install 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 ID and plug in 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 2. 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 emulated 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 it 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 do we need to do is 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 quit 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 built the project with the help of the Android SDK that was installed together with Android Studio. And that first built process can again take a couple of seconds. Subsequent ones will be faster and now it should be up and running. Let's do 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 want to run on real devices you can follow the steps outlined in the documentation. But of course we'll also run together on the real device later in the course. For now let's focus on the editor with which we're going to work on this code.