[How-to] Develop Flutter on Apple Silicon M1
I’m never short of random project ideas. Me not having the craft to deliver them is frustrating. It’s been almost half a decade since I last developed mobile apps. That’s dinosaur age in tech. Not only I’m utterly out of practice, but also the language and framework I’m familiar with then, Objective-C and AngularJS + Ionic Framework, have fallen out of favor.
React Native has dominated the cross platform development framework. It allowed mobile apps to be developed on JavaScript, which was predominately a web-centric language before React Native. Flutter, a late comer, released only a little over three years ago, has been on a steady rise in popularity and is challenging React Native’s position.
This article demonstrates step-by-step on how to install and run Flutter on the latest Apple Silicon M1. This is the first part of the series on Flutter development, where I take you on my learning journey on Flutter, the lessons I learned, and how Flutter helped me to deliver the app I’ve been wishing to build.
Install Flutter
First, get the latest version of Flutter here. At the time of writing, 2.10.3 is the latest stable release for OS X.
I would recommend installing Flutter in the ~/Library path, this is where Apple puts all the supporting files anyways:
$ cd ~/Library $ unzip ~/Downloads/flutter_macos_2.10.3-stable.zip
Add Flutter permanently to your path. I use Z shell, so for me, I add the following to ~/.zshrc
$ export PATH=”$PATH:$HOME/Library/flutter/bin”
You should now be able to verify that Flutter and Dart are both installed on your machine by
$ which flutter dart /Users/[your-username]/Library/flutter/bin/flutter /Users/[your-username]/Library/flutter/bin/dart
Next, run flutter doctor to see all the dependencies you’ll need to complete the setup. You should get an output like this:
We’ll go through each bullet point in here and install all the dependencies next.
Install Android Studio
You can get the Android toolchain as part of the Android Studio installation, so let’s move ahead and get it from here.
The installation is pretty straightforward. I skipped importing Android Studio settings and went with basic installation.
Once the installation is finished, run flutter doctor again, you should see the following output where Andoird toolchain requires a couple of more items.
Install cmdline-tools
Open Android Studio in Applications, and on your keyboards, enter ⌘ + , to bring up Preferences.
Navigate to Appearance & Behavior > System Settings > Android SDK > SDK Tools, check Android SDK Command-line Tools(latest), and click Apply.
This will also take care of adding sdkmanager to your PATH. But sdkmanager requires a Java Runtime. If you don’t have one, you can download it from here. I downloaded and installed Java 17 LTS(latest at time of writing) and was able to run with Flutter w/o any problem.
Next, navigate back to your shell, run
$ flutter doctor --android-licenses
Acknowledge all the required licenses and we have completed the Android toolchain step.
Install XCode
Go to App Store, download and install Xcode. The infamous Xcode installation takes a very long time depending on your internet speed. Get up, refill your coffee, walk the dog, pet the cat, do some stretches - you might have to do all of them to pass the time.
When you finally have Xcode installed, run the following command:
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer $ sudo xcodebuild -runFirstLaunch
Acknowledge all the required licenses again and we have completed the XCode step
Install Cocoa Pods
Lastly, install CocoaPods. CocoaPods is the package manager for any Objective-C runtime.
This is technically an optional step. But chances are, you are going to use some Flutter plugins and you will need this if you want your app to run properly, or even at all, on iOS. We’ll cover deploying your app to an iOS device in a later chapter.
$ sudo gem install cocoapods
After the installation, run flutter doctor again. You should find all the checks have passed and we are ready for some actions!
Ready, Action, Go!
Go to that folder where you have all your development apps. For me that’s ~/Workspace and I’ll use that in the example:
$ cd ~/Workspace $ flutter create app $ cd app $ flutter run
After waiting anxiously … you will see the infamous Flutter demo page. Congratulations, you are now running Flutter on Apple Silicon!
Next, I’ll take you through declarative UI, the fundamental concept that Flutter is built on, Flutter widgets, the Flutter equivalent of React’s components, and how the two work together! Stay tuned.