Setting up your MacBook for mobile Flutter development
Tags: flutter, macos, mobile, tutorial
Published: 2022-12-20 19:53:14

This month I'm trying to level up on my mobile development skills by learning [Flutter](https://flutter.dev) 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](https://brew.sh/).

## 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](https://cocoapods.org/) for dependency management on the iOS side. Install it using `brew`.

```sh
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.

```sh
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](https://www.lifewire.com/how-to-install-android-sdk-4770060) walks you through the steps, but here's an overview. 

First, [download](https://developer.android.com/studio/) 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](https://www.java.com/en/download/).
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.

```sh
~/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](https://www.algolia.com/doc/guides/building-search-ui/getting-started/flutter/).