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.
- Install Xcode [~10 Gb] on your Mac via the App Store.
- Install Visual Studio Code [~100 Mb] via Microsoft.com.
- Install Android Studio [~1 Gb] via Android.com.
- 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.
- 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
- Update your path so that the flutter binary directory can be found. On Mojave and earlier, add to your ~/.bash_profile the following line:
- Then source the profile or input the commands manually.
$ source ~/.bash_profile
- 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.
- 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.
- 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
- 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
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).
- 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.
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.
And there it is!
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.
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!
We’re Almost There!
Now keep following the instructions over here and you need to now make and run your first flutter app.
- Make the app “flutter create my_app”
- Hop into the directory “cd my_app”
- Now run the app “flutter run”
I have both my devices running (iOS and Android) and so what I get is:
$ flutter run More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all 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) $ flutter run -d all
Note that I can target a specific device by typing in its name or I can run it on both, which results in the following beautiful moment.
Hit ‘d’ to detach from the emulators. If you want to target just one device you do the following (put the name of the device in double quotes):
flutter run -d "iPhone 11 Pro Max"
Flutter does what’s called “hot reload” which is really cool once you get started with it. But if you see the above outcomes then you are ready to take a break and consider how you have made all the magical incantations necessary to develop native mobile apps on all major platforms out there. Enjoy the feeling! —JM
If you’re using Catalina, the one thing you want to note in my instructions is to be careful for how you set your $PATH. The default shell in Catalina is zsh which means you need to edit your .zshrc file. Thanks to Travis Boatright for adding this extra tip for Catalinans out there!