Setting up your MacBook for mobile Flutter development

This month I'm trying to level up on my mobile development skills by learning Flutter with and end goal of building a mobile search application. The first step was setting up a functional local dev environment on my laptop. I realized that there would be a few steps, but I didn't anticipate needing SIX different languages to get up and running!

In this post, I'll walk you through setting up your MacBook for cross-platform Flutter development on iPhone and Android devices.

Assumptions

You will need a terminal configured just the way a like it and the brew package manager installed. If you don't have it already, you should install brew first.

Install Flutter

The easiest way to install flutter is using brew

brew install --cask flutter

Once brew has installed flutter and all of its dependencies, you can use flutter itself to track what's left to do:

flutter doctor

This is also a good time to install command completion for flutter. Here's the command to that for zsh:

flutter bash-completion >> ~/.zshrc

Depending on what you already had installed, you probably have a lot left to do, so let's get to it!

The iOS build path

For iOS development, you need a full version of Xcode including the iOS SDK, not just the command line tools. It's easiest to install this from the App Store. Once it's finished installing, drop back to the command line and run the following command to accept the License agreement and install any additional components.

sudo xcodebuild -runFirstLaunch

You'll also want cocoapods for dependency management on the iOS side. Install it using brew.

brew install cocoapods
pod setup

That should be everything you need for iOS. Let's test to see if it works.

Testing the iOS build path

It's time to launch an iPhone simulator and create your first Flutter project.

open -a Simulator
flutter create my_first_app
cd my_first_app
flutter run

This should launch an iPhone emulator, create the default click-counting Flutter app, and load it onto the emulated iPhone.

The Android build path

On the Android side, you'll want to install Android Studio and the Android SDK. This guide walks you through the steps, but here's an overview.

First, download and install Android Studio for MacOS.
Launch Android Studio and create your first project.
Select Tools -> SDK Manager -> Android SDK -> SDK Tools and install the Android SDK Command-Line Tools and the latest Android Emulator

Switch back to the command line to accept all necessary licenses for Android using the following command.

flutter doctor --android-licenses

You'll need a Java runtime environment if you didn't already have one installed. The easiest is to just install the latest JRE form Oracle.
That should do it for the Android side. Time to test.

Testing the Android build path

To test the Android side, install an emulator and set it up as a target for flutter. First, choose an image.

~/Library/Android/sdk/tools/bin/sdkmanager --list | grep system-images

Select a recent system image to install and create an Android Virtual Device. Then you can launch the emulator and load the click-counting Flutter app.

~/Library/Android/sdk/tools/bin/sdkmanager --install "system-images;android-33;google_apis;arm64-v8a"
~/Library/Android/sdk/tools/bin/avdmanager create avd -n "pixel_5_api33" -k "system-images;android-33;google_apis;arm64-v8a" -b "arm64-v8a" -d "pixel"

flutter emulators –-launch pixel_5_api33
flutter run

You are now ready to begin cross-platform development of your mobile app!

Next time, we'll add search to our mobile applications using the Algolia Flutter Helper.