/Setup

Install Flutter on Mac OS

Below is just about everything you need to do to install Flutter on your Mac OS machine.


Prerequisites

What follows is a list of the prerequisites necessary to install Flutter on your machine. If you have everything already installed and ready to go you can safely skip this section, otherwise follow along our step by step instructions on how to get everything set up.

What you’re going to need:

  • Brew
  • Git
  • Curl
  • Unzip

Brew

Homebrew is the first thing every developer should install on their Mac. As their creators state brew is the missing package manager for Mac OSX. To install homebrew on your machine open your Terminal.app and paste /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)".

Git

You can install git through brew. Run brew install git to install git.

iOS and Android Tools

You don’t necessarely need to install tools for both iOS and Andoid if you plan to only develop for one platform, but since Flutter explicetely targets cross platform development it’s where it shines.

If you decide to install only one platform remember that you can always come back and install the other platform later on.

Install iOS Support

If you plan to build for iOS devices you also need to install the development environment to build applications for your target platform.

Download Xcode

Download Xcode from Apple’s website and Install it.

Unzip the file and open it proceeding through all the steps of the configuration wizard. Once opened, make sure the developer tools for the command line are installed by opening a Terminal window and running sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer. Also accept Apple’s license agreement by running xcodebuild -license.

With Xcode open press ⌘P, or open the Preferences screen. Navigate to Accounts and add you Apple account to the empty list, you will need it to generate a Developer Certificate and Provisioning Profile to run and sign your applications.

Create and Test a simulator

Xcode should have already created a few default simulators for you, you can check which simulators you have installed by opening Xcode and going to View > …

You can also check it by opening the Terminal and running `open -a Simulator.app’.

To test if everything is setup correctly create a new iOS application, we will delete it as soon as we confirm that everything works as expected. Select the Language as Swift and leave everything else turned off. Press ⌘R to run the application, it should open the default simulator and run the App.

The Simulator is working! You can now close the Simulator and Xcode and delete the placeholder project.

Install Android Support

If you plan to build for Android devices you also need to install the development environment to build applications for your target platform.

Download Android Studio

Download Android Studio from Google’s website and Install it.

Install the SDK

Android Studio has already installed most of what you need, you just need to go to Preferences SDK and download the SDK for the version of Android you want to support (this would mostly depend on the free space on your HDD/SSD). I would recommend to at least download the latest 2 versions (not including betas).

Create and Test an emulator

Before you can run an Android application on your Mac you need to install an emulator using AVD Manager included in Android Studio.

Create a new Android Project (it will be a placeholder that we’ll delete as soon as we finish the setup), if it asks for the language select Java. On the bottom bar you will get notifications on the build status. If something is missing Android Studio will automatically offer to download it, download everything that is needed to run the application.

From the menubar open Tools > Android > AVD Manager and click on “Create Virtual Device”. Choose a name for the device and select the latest version of the Android SDK you have installed on the local machine.

After everything has downloaded and the emulator is setup open it to confirm it runs correctly by pressing on the run button from the main screen of any Android Studio projects.

The Emulator is working! You can now close the Emulator and Android Studio and delete the placeholder project.

Install Flutter

You can install Flutter through brew as well, this has the advantage of preserving the ability to automatically update to a newest version when available.

brew install flutter

Test your Flutter Installation

Follow the next steps to test your Flutter installation and make sure that it’s working properly before proceeding.

Path

You need to configure the PATH variable to be able to call Flutter as flutter, otherwise it will say that Flutter is not a recognized command. For this tutorial we’re assuming you’re using the default (bash), if you installed something custom (for example zsh) you need to use the file that corresponds to the “bash_profile” for your installation.

Open your “bashprofile” from your User’s directory in your editor of choice or run `nano ~/.bashprofile` to edit it directly from the Terminal.

Add at the end of the file:

export PATH="/Users/$USER/flutter/bin:$PATH"

Android Caveats

It is possible that Android Studio didn’t automatically setup the PATH for the android SDK. Check the file for any string that includes “ANDROID”. If there isn’t any, or if the Flutter Android integration is not working even thought there is one, you might want to also add

export ANDROID_HOME=/Users/$USER/Library/Android/sdk
export ANDROID_SDK_ROOT=/Users/$USER/Library/Android/sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

while commenting out the existing one. You can comment by prepending the line with ”#“.

You can test if this fixed your installation and if it didn’t you can simply remove these 3 lines and uncomment the line you just commented to go back to the previous configuration.


Finally before testing anything reload the current session by running source ~/.bash_profile in the Terminal.

Try typing flutter --version and you should get back the version number.

Doctor

After you finish installing everything you can test if everything works properly by running flutter doctor.

Flutter Doctor is a powerful tool, you should use it every once in a while - for example after major updates to either Flutter itself or its components (Xcode/Android Studio) are updated.

Flutter Devices

If you have connected a device, but you don’t see anything check the section on how to configure a device for Android and for iOS in “Running your Application”.

Editor

If you already have an editor setup you can skip this phase, otherwise we’ll show you how to install and configure Visual Studio Code to run and debug Flutter applications effectively.

Download Visual Studio Code

You can download Visual Studio Code from Microsoft.

Unzip the downloaded file and install it.

Open it and get familiar with the interface. The beauty of VSCode is that is based on Extensions so you can use it with any language and any framework with the right Extensions installed. It also integrates really well with both git and debugging tool. For example you can debug your Flutter apps with breakpoints and everything from inside VSCode. In that sense it is more of an IDE than a simple Text Editor.

Extensions

The only extension needed for Flutter is called “Flutter”. You can install it by opening Visual Studio Code and pressing on the cog in the bottom left of the screeen and selecting “Extensions”. Type “Flutter” in the Search Box and select the result by the author “Dart Code” (it should be the first result). Installing Flutter will also include Dart language support.

Once installed you can load it by pressing on “Reload the Editor” and the extension will be active without having to close and reopen VSCode.

Run your application

You can run the application by typing flutter run in the Terminal.

If you’re using Visual Studio Code you can also use the command palette by pressing ⇧⌘P and type “Flutter” to get a list of all the commands available.

On the Simulator/Emulator

You can select which simulator/emulator you want to run your app on by using VSCode command palette. After pressing run you will be shown a list of all the available devices and you can click or press a number to select which one you want to launch your application on.

iOS

After making sure that Xcode is properly installed and configured, open up the simulator open -a Simulator. With the simulator open run the app with flutter run.

Android

Run the application with flutter run, VSCode will open the Simulator for you.

On Devices

You can check which devices you have connected to your Mac that are visible to Flutter by running flutter devices.

iOS

For iOS devices you might need to install some additional components from brew if it doesn’t want to launch.

Android

On Android it works out of the box, assuming you have added the correct path to the Android sdk to your “bash_profile”.

Sources:

  • Flutter Official Website
  • Microsoft
  • Dart Official Website

Subscribe to Learning Flutter

Get the latest posts delivered right to your inbox

Valentino Urbano

Valentino Urbano

Valentino Urbano is an iOS and Web Developer from Milan, Italy. Working on his own he pursues his passions as a programmer.

Read More