Setting up Flutter on macOS

After working on native android apps for the past five and a half years now it’s time to embark on a new journey with Flutter.

What is Flutter anyway?

Flutter is a cross-platform technology developed by Google. It is used to develop apps for Android, iOS, and Web. Flutter is an easy way of developing amazing native apps. You don’t need to maintain separate code bases for Android and iOS or the web. Moreover, now you can also develop desktop apps using Flutter.

Flutter uses Dart as a language that at first can seem a little bit odd or “not clean” but as you familiarize yourself with it you will find Flutter easy. For more information about why Flutter uses Dart check out this article.

Setup :

This article covers Flutter setup on macOS check for setup on Windows, Linux, or Chrome OS.

Let the Flutter setup begin:

Get the SDK:

Just like iOS or android first, you need to install the software development kit (SDK). Get the Flutter SDK for the macOS latest stable version. You will get it as a Zip file, after downloading the file unzip to a location where you want to use it.

cd ~/Path to you Folder
unzip flutter_macos_2.0.6-stable.zip

Replace the name of the zip file with the one that you downloaded.

Add flutter to the Path:

Open your rc (run command) file located in the Home directory. To go to home open finder, hit Command+Shift+G it will open a dialog, type ~ and press enter. You will go to the home folder. Press Command+shift+. if files are hidden. Based on your shell you should open rc file. If you are using Z Shell open the .zshrc file or if you are using Bash then open .bash_profile. If you don’t know which shell you are using, run this command in the terminal.

echo $SHELL

Once you have the rc file opened add the path to the bin folder of the flutter SDK (that we unzipped in step 1) like this.

export PATH="$PATH:[unzipped_flutter_folder]/bin"

To verify flutter location run in terminal:

which flutter

Now source the file by source $HOME/{.bash_profile or .zshrc}if it does not work try restarting the terminal.

Check Flutter dependencies:

Now that we have installed Flutter and setup and verified the path it’s time to check if there are some missing dependencies. Dart comes with the Flutter SDK so no need to install separately but some other dependencies like android dependencies or iOS can be missing. You can install according to the platform. In the terminal:

flutter doctor

This command will show you the dependencies that you might need to install based on your desired platform. Once you have installed all the dependencies now we can start setup for android.

Android Setup:

Photo by Denny Müller on Unsplash

If you don’t have an Android Studio installed then Install the latest version of the Android Studio along with all the dependencies by going through the wizard.

Once installed, open the Android Studio. Install Dart and flutter plugins from Android Studio > Preferences > Plugins. Search for Dart and then flutter plugins in the search bar and install both the plugins one by one.

Creating first flutter project:

After you are done will the installation create a new flutter project from File > New > New Flutter Project, keep the default Flutter Application selected press Next.

Write project name and then Flutter SDK path (It’s the path to the Flutter SDK folder that we unzipped in first the step) press Next. Write your package name like com.test.yourappname then press Finish. A new project will be created along with a bunch of code. Now we have to run the project for that we need an android device or emulator. For the device, connect your USB wire with the mac and use that device to run the app.

Android Emulator:

Android emulator can be launched or created from AVD Manager. Go to AVD Manager from Tools > AVD Manager. Press Create Virtual Device, select the device press Next select system image (install if necessary), press Next again, and then Finish. Press play icon to launch the emulator. You should see emulator running on the screen.

Once the emulator is running you should see the name of the emulator in the tools bar. Now click the Play icon in the tools bar.

Android studio will start compiling code and if you have followed all the previous instructions you should be able to see the flutter Demo app running in the emulator.

iOS setup:

Photo by blocks on Unsplash

Open or install Xcode. For freshly installed Xcode run following commands in the terminal.

sudo xcode-select --switch /Applications/Xcode.app/Content/Developer
sudo xcodebuild -runFirstLaunch

Run Xcode at least once to accept the licenses or run command in the terminal sudo xcodebuild -license .

Running Simulator:

As we created an emulator (android virtual device) for android now we will run Simulator (iOS virtual device). In the terminal run:

open -a Simulator

or open your Xcode and in the top right corner of the system bar click Xcode > Open Developer Tool > Simulator. After the Simulator is running you should be able to see it in the Android Studio Toolbar.

Now click the play button and after compilation, you should see the app in the Simulator.

The first image from iPhone 12 Pro Max Simulator and the second is from Pixel 2 with API 29. How cool is that? Is not it awesome?

In this article, we set up flutter on macOS. Created new project in the android studio and ran on both Android Emulator and iPhone Simulator. That’s it for now. 👊

P.S you can also create Dashatar (avatar for flutter mascot), like the one in the header image of this article, from here.