Setup Flutter Developer Environment on Mac

Setting up a Flutter development environment on Mac OSX

Here is the the steps I’m usually taking when reinstalling my Mac OS from scratch (or when buying a new Mac) to have a completed environment to Flutter development.

Install and run Xcode

If you want to write and test your Flutter code for iOS you’l definitely need Xcode.

So open the AppStore application and search for “xcode”:

It’ll take a long time to download and install it depending on your Internet connection and machine speed.

When Xcode downloaded and installed, run it for the first time. Accept ro the License Agreement:

Xcode then will install additional components:

After installation of components is completed continue to Install Flutter.

Install Flutter

Go to official Flutter site and Download a Flutter binaries

Create a folder to keep Flutter binaries. Personally I prefer to create “Developer” folder in my home directory because it have a cute “Developer” icon 🙂

Open Mac OS Terminal: Go to Applications -> Utilities -> Terminal

!!! Keep the Terminal App open, we’ll need a lot of tasks there !!!

In Terminal unpack the downloaded Flutter files:

% cd ~/Developer

$ unzip ~/Downloads/flutter-<version_here>.zip

Developer % tar xvf ~/Downloads/flutter_macos_v1.12.13+hotfix.8-stable.zip

If you using Safari with default preferences it’ll unpack the archive automatically after download. In such case simply drag “flutter” folder from your “Downloads” to the directory you created (in my case it’s “Developer” folder).

Next setup a PATH for Mac OS for Flutter binaries.

I’m using a Mac OSX Catalina, and they have changed the default shell to zsh, previously it was a bash. So, for Catalina we need to create a .zshrc file in our home directory, for older version you’ll need to edit or create a .bash_profile file. Look for the PATH section on Flutter download page for details.

Execute the following command in Terminal:

% nano -w ~/.zshrc

Put the following line in nano text editor:

export PATH="$HOME/Developer/flutter/bin:$PATH"

(Change the Flutter path for the directory where you put your Flutter binaries)

This file will be loaded after the next login. To check this and to move further with Flutter, let’s execute some commands in Terminal. First let’s use .zshrc for current Terminal session:

 % source ~/.zshrc

Let’s check if we have access to Flutter binaries:

 % which flutter

You’ll receive a line like this:

/Users/ikarelin/Developer/flutter/bin/flutter

Let’s make Flutter precache:

% flutter precache

If you don’t have a Java JDK installed on your machine, you’ll receive a next message:

And Mac OS will offer to to install a JDK:

If you click on “More Info” you’ll be directed to Adobe Flash Plugin site, which useless for us now 🙂 So, to get Java JDK go to:

https://www.oracle.com/java/technologies/javase-jdk8-downloads.html

Find a Mac OS installer file:

Accept Agreement and download Installer.

Install downloaded package. After the installation check if you have java on your machine:

You can run “flutter precache” again to check if there is no more Java warnings if you want 🙂

Install Cocoapods

Cocoapods is used for Flutter iOS development. Not actually only in Flutter, also when you’re making an apps in Xcode for iOS.

As for Flutter, when you’re adding a Dart packages to your project in pubsec.yaml, they are “translating” to Cocoapods libraries for iOS build.

So, let’s install Cocoapods. Open Terminal and paste:

% sudo gem install cocoapods

After the installation check Cocoapods version:

(My current version is 1.9.1)

Install Homebrew

Homebrew contains additional libraries to connect to your iOS Simulator or for real iPhone/iPad device, if you’re testing on real gadgets.

Official page of Homebrew:

https://brew.sh

Copy and paste the following command to Terminal to install Homebrew:

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Installation of Homebrew will take some time,

Mac will show an alert that you have updates to install (Xcode command line tools).

Don’t install the updates, the alert will go away soon.

Install Intellij IDEA

Let’s install IntelliJ IDEA . Go to the downloads page and get it:

https://www.jetbrains.com/idea/download/#section=mac

Community Edition is enough to developing in Flutter and it’s FREE.

Install it as usual on Mac – just drag it into your Application folder:

We don’t need to import anything, it’s a fresh instal, just press “OK”l:

Choose appearance, plugins of your choice, I’m just clicking “Next” there.

Now let’s push “Configure” and select “Plugins” from menu:

Type “Flutter” in the Search Field:

Press “Install” on the top “Flutter”, it’ll ask for install a Dart plugin, accept all what it’s asking.

I strongly recommend to install “Flutter Snippets” plugin and “Flutter Enhancement Suite”.

They’ll save you a lot of typing and mistypings 🙂

After installing plugins press “Restart IDE”. IDEA will be restarted for sure 🙂

Adding Android SDK

Now it’s time to run “flutter doctor” command in Terminal:

You’ll receive the next output:

The items marked with the Red Cross must to be fixed. So, we missed Android SDK.

Let’s fix it. Open IDEA and select “Create a new project”:

Select “Flutter” and click “Next”:

Type som project name and click “Finish::

Go To InelliJ IDEA – > Preferences:

In the Search field type “SDK”:

Press “Edit” at “Android SDK Location:

You’ll be presented with “SDK Components Setup” window, press “Next” here.

The next window is “Verify Settings”, press “Next”.

After the process of downloading/installing is complete, press “Finish” button.

I’m STRONGLY recommend on this step to install “Android 9.0 (Pie), API level 28 here.

A lot of Dart plugins depends on it and you’ll receive a lot of compilation errors when you’ll start compiling your Flutter code to Android.

So just check “Android 9.0 (Pie) and press “Apply”. It’ll take some additional space on your Hard Drive though 🙂

Accept the licenses.

Now you are ready to write a cool Flutter Apps in Mac and IDEA IDE.

Hope you’ll write a lot of cool Flutter code 🙂

One comment on “Setup Flutter Developer Environment on Mac

Leave a Reply