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.
Top comments (0)