Gentle Primer For Setting Up Flutter on OS X

By John Maeda @ Publicis Sapient

We bridge strategy and engineering with experience.

Why is computational design important? It lets you proceduralize and automate what can be a tedious task to repeat over and over — and it doesn’t mean you have to code. If you can think computationally, that’s where you want to start. You need to know how to speak machine at least a little, or as I like to say “un poco,” to get a feel for what the 4th industrial revolution is all about.

In the event you want to feel “the rush” of being fluent in code without writing any code I recommend getting started with Flutter because it’s a bit … weird. It lets you deploy the same code to native instances of iOS, Android, and the Web — all with the same sorcery skills. As an unabashed fan of Flutter — as I recently shared in Fast Company as one of the most important design ideas of the decade — I was tickled to see the Flutter team respond to my opinion.

So I thought it would be helpful to have a step by step guide for how to get started with Flutter on OS X in case it seems a bit frightening. Frankly, it is a bit daunting to get going, so here’s a guide for how to see what I’ve started to see in Flutter from the safety of your own computer. Note that I’m still running Mojave instead of Catalina. For a note on Catalina scroll down to the bottom of this post …

Download All The Flutter-Related Things

To get started you’ll need to have at least 15 Gb available on your computer to get going. The following will take you about 15 to 30 minutes to download on a fast connection.

1. Install Xcode [~10 Gb] on your Mac via the App Store.
2. Install Visual Studio Code [~100 Mb] via Microsoft.com.
3. Install Android Studio [~1 Gb] via Android.com.
4. Install Flutter SDK [~1 Gb] ia Flutter.dev.

The first three installs happen the normal way. Either they are automatically set up for you, or you need to manually drag them into your Applications folder. The last one, installing Flutter, requires you to access the command line via a Terminal application. Follow the instructions here and you will be fine. I’ll walk you through what I did here via a fresh install at the end of 2019 (note that month to month install processes change so always check out the source documentation.

1. Make a new directory where your flutter life will live. I put mine in “fdev” off of my root directory, which means “~/fdev” — and I unzipped the Flutter SDK in there. So that constitutes the following:

$ mkdir fdev
$ cd fdev
$ unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.5-stable.zip

1. Update your path so that the flutter binary directory can be found. On Mojave and earlier, add to your ~/.bash_profile the following line:

export PATH="$PATH:~/fdev/flutter/bin"

1. Then source the profile or input the commands manually.

$ source ~/.bash_profile

1. Keep following the instructions from the Flutter SDK which will look like:

$ flutter precache
$ flutter doctor

After you input flutter doctor it will tell you if you have what’s needed. In my case it’s telling me to configure Android Studio, Xcode, VS Code with step by step instructions for what to do.

1. You’ll need to start by opening all three applications so that they wake up and start to get situated on your computer. They’ll be downloading all kind of stuff as they officially “move in” to your computer.
2. For Xcode I’m told that I need to have CocoaPods installed, so I go and do something as a superuser:

$ sudo gem install cocoapods

1. For Android Studio you want to keep clicking through until it starts downloading a bunch of stuff for a standard Android SDK install. When I first ran Android Studio I backed out of all the dialog boxes, but instead keep pushing forward until it’s happy. Note that Intel wants to install something on your computer — this surprised me — and I thought to myself, “Oh well …,” and kept going. You’ll then need to accept a bunch of EULAs from the terminal window with:

$ flutter doctor --android-licenses

1. Then from within Android Studio you want to go to Android Studio > Preferences and then click on the “Plugins” tab. Search for “Flutter” and hit install — which will also install the Dart plugin as a dependency. You will then be prompted to restart your IDE (Integrated Development Environment).
2. For Visual Studio Code you want to run it and then get a plugin from here, which lands you in VS Code and click the “install” button.

If you’ve gotten this far then CONGRATULATIONS! You should get the following when you type “flutter doctor”:

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.14.6 18G87, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.41.1)
[!] Connected device
    ! No devices available
! Doctor found issues in 1 category.

Okay! Take a break! You’ve earned it!

Get Both An Android Simulator And iOS Simulator Running

You’ll next need to set up a few devices that Flutter can connect to. Go here to see how to configure a fake Android device to run on your Mac.

You can find the AVD Manager over here in Configure >

First, configure your Android Virtual Device (AVD) manager for graphics acceleration. Then click on “+ Create Virtual Device” and select your favorite device. I have a Pixel 3 XL so that’s my go-to device. It asks for a system image so I just select the latest one — which results in a 1.1 Gb download! Keep pressing forward with making the virtual device.

You’ve almost made it!

And there it is!

Click on the “Play” button to run the emulator …

If you then run flutter doctor you will see that you now have 1 connected device available! That gives you an Android device to start. If you’d like to see an iOS device, that’s a lot easier.

Just run “Simulator” (hit command-space to find it) and you’ll be booting up an iPhone running on your Mac desktop.

Both devices are now running on your Mac …

Now when you run “flutter doctor” you can see it found two devices:

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.14.6 18G87, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.41.1)
[✓] Connected device (2 available)

And if you run “flutter devices” you’ll see the more precise descriptions appear. Note that you can change the model of the iOS device to a less fancy one from the menu bar. It’s way easier to do this than for the Android emulator.

$ flutter devices
2 connected devices:
Android SDK built for x86 • emulator-5554                        • android-x86 • Android 10 (API 29)
(emulator)
iPhone 11 Pro Max         • 61F8CD4B-9350-46CD-9847-96F1BB9D7919 • ios         •
com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)

Feels good? I know! Take a break before we go forward. Because the next step is going to feel a-ma-zing!