How to Install & Set up Flutter on Mac

A step-by-step guide on setting up Flutter for people learning to code on Mac.

I found the official documentation to set up Flutter a bit lacking in information. Since I had to Google quite a bit of what some of the instructions meant, I thought I’d write a comprehensive guide for Mac users with little to no programming experience & for anybody else stuck in the process.

Step 1: Download the Flutter SDK zip file

Get the latest stable release of the Flutter SDK by downloading the installation bundle from the official website.

Go here and download the zip file.

Step 2: Extract the installation files

Copy and paste that zip file from the last step into the folder where you normally save your coding projects. If it’s your first time setting up a coding environment, then create a folder just for this.

It’s totally up to you where you want to create that folder. What I’ve done is set up a Code folder under the users>current user folder to save all my coding projects — location illustrated below. A lot of users name this folder Development. Again, the name is up to you.

Ok, so after you’ve navigated to this particular folder, paste the zip file here. Double-click on the file and it will extract a folder called Flutter. You can now delete that zip file.

Step 3: Configuring the Terminal

Open the Terminal application from the launchpad or search spotlight.

1. Switch to the folder where you extracted the Flutter SDK files in step 2. Type cd followed by the folder or path where the flutter folder is located relative to your user folder. For me, it’s the following command:

cd code

2. Now add the flutter tool to your path. You can do that by entering the following code in your terminal and replacing `pwd` with the absolute path to the flutter folder.

export PATH="$PATH:`pwd`/flutter/bin"

Using my settings as an example, this is what I entered:

export PATH="$PATH:/Users/mishka/Code/flutter/bin"

You won’t get any response from the terminal. To see if it worked, enter the following in Terminal:

flutter precache

If you get an error saying “-bash: flutter: command not found”, it’s most likely because you entered the wrong path. So revisit that, and get it right. This YouTube video might be helpful, if you’re stuck and need some visual help.

Here’s a screenshot of what you should see:

Note: Do not close the Terminal until you’ve finished the installation process right till the end of this tutorial. If you were interrupted, then repeat this step again before resolving dependencies in step 4.

Step 4: Install & resolve dependencies

You can use Flutter to build all kinds of apps. So depending on what exactly you plan on using it for, you’ll need to download certain dependencies to complete the installation process.

Enter the following command, to see what’s missing:

flutter doctor

You’ll see something like this:

To resolve these dependencies, you’re going to need to install the following applications:

• Android Studio
• Xcode (only if you plan on developing iOS & MacOS apps)
• VS Code

You’ll also need to install Flutter plugins/extensions for each of these applications. If you already have them downloaded, you’ll only need to download the plugins.

Step 4A: Resolve Android Studio Dependencies

Let’s start off with downloading & installing Android Studio. Get it from their official site here. After you’ve downloaded and installed Android Studio, you need to install the Flutter extension. Click on configure and then on plugins on the welcome screen.

Search for Flutter in the marketplace, and click install on the first result. It might ask you that to download dependencies for Dart as well. Click yes to that and everything else that they ask you. After restarting Android Studio, go back to your terminal, and enter flutter doctor again.

You should see a green tick next to Android Studio.

Take a look at Android toolchain as well. You might also have a green checkmark here as well. Or instead, like me, have a warning exclamation mark with the following error next to a red x:

Resolving it is pretty self-explanatory. Just enter the following into terminal and enter y in response to every question they ask you.

flutter doctor --android-licenses

After that you should get a green tick next to Android toolchain when you run flutter doctor in Terminal again.

Step 4B: Resolve Xcode Dependencies

If you plan on developing apps for iOS and MacOS, you’ll need to download and install Xcode. It’s quite a heavy file and the installation process is one of those that turn your laptop’s fans on and drain the battery. So don’t be alarmed and don’t do it if you’re on the go.

You can get Xcode from the App Store. After downloading and installing, you’ll need to run one more command in the terminal to install the CocoaPods plugin for Flutter:

sudo gem install cocoapods

It’ll prompt you for your Mac password. After the installation is complete, run flutter doctor in Terminal again, and you should see that green tick next to Xcode as well.

Step 4C: Resolve Visual Studio Dependencies

Visual Studio is a code editor. If you’re new to programming, then you’ll need to download this program to write code for any application. You can download it from their official website. Follow the installation process after it finishes downloading.

Once you have Visual Studio set up, open it and go to the Extensions marketplace by going to Code>Preferences>Extensions or with the keyboard shortcut: Shift+CMD+X.

Type Flutter in the search bar and install the first extension:

That should resolve the VSCode dependency the next time you run flutter doctor in Terminal.

I’m not resolving Connected Device as that is something you’ll get to when developing the app.

That ends the tutorial on installing and setting up Flutter on a Mac device. Now you can start developing apps by following a tutorial or book or wherever you wan to learn from.

My recommendations to help you learn Flutter are the official documentation, the free course on Udacity, and grabbing and saving code snippets for Flutter from thiscodeworks.com.

Hope this guide helped!