Installing Flutter on MacOS: A Guide for M1, M2, and M3 Chips

Not straight forward as one might think

Flutter is a robust framework for cross-platform development, but setting it up on a Mac with M1, M2, or M3 chips can be trickier than you might expect. In this guide, I’ll walk you through the process, highlighting the steps where I initially stumbled to help you avoid the same pitfalls.

Prerequisites

Before diving into the Flutter installation, it’s essential to set up the following tools and software on your Mac. Ensuring these prerequisites are installed will streamline the Flutter setup process and help you avoid potential complications.

1. Visual Studio Code
2. Rosetta
3. Homebrew
4. Xcode
5. CocoaPods
6. Android Studio
7. Android Tool Chain

Step-by-Step Installation

1. Install Visual Studio Code

As a developer, you’re likely familiar with Visual Studio Code. If not, it’s a versatile editor that you can download here.

2. Install Rosetta

Rosetta 2 allows applications compiled for Intel-based Macs to run on Apple silicon. Install it using the Terminal command:

sudo softwareupdate --install-rosetta --agree-to-license

3. Install Homebrew

If you’re using a Mac and haven’t yet installed Homebrew, you’re missing out on a powerful tool that simplifies software installations via the command line. Homebrew streamlines the process of managing software on MacOS, making it easy to install, update, and maintain a wide range of applications.

To get started, simply visit the Homebrew website and follow the instructions to install it with a single command in your terminal. This quick setup will open up a world of efficiency for managing software on your Mac.

4. Install Xcode

Open the App Store, search for Xcode, and Install. Then, run the following commands in your terminal.

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

sudo xcodebuild -license

Type agree and press enter. Then, put in the following command.

xcodebuild -downloadPlatform iOS

The above commands should get an iPhone simulator setup for your development.

5. Install CocoaPods

To install CocoaPods, you must first have Ruby installed on your Mac. While MacOS comes with Ruby, I recommend using the latest version installed via Homebrew to avoid potential errors.

Go ahead and install Ruby using Brew with the following command.

brew install ruby

Next, you need to add Ruby to your PATH to use the version installed by Homebrew. Edit the .zshrc file in your home directory and add the following lines at the end:

if [ -d "/opt/homebrew/opt/ruby/bin" ]; then
  export PATH=/opt/homebrew/opt/ruby/bin:$PATH
  export PATH=`gem environment gemdir`/bin:$PATH
fi

After editing, save the file and refresh your terminal settings by closing and reopening the terminal. With the environment configured, you can now install CocoaPods using the following command.

gem install cocoapods

6. Install Android Studio

Here is the power of Brew in action. Just go ahead and run the below command.

brew install --cask android-studio

After the installation is complete, launch Android Studio. You’ll be greeted by the setup wizard, which will guide you through the initial configuration. Follow the steps outlined in the screenshots below to complete your Android Studio setup.

7. Install Android Tool Chain

To install the Android toolchain, first open the Android studio and go to the SDK Manager as shown in the screenshot below.

Then select the Android SDK Command-line Tools option in the SDK tools tab, as shown in the screenshot below, and click the OK button to install Android command-line tools.

Install Flutter

You need to install the Flutter extension from this link before continuing with the below steps.

The following steps won’t be different from the official website except for some warnings and some additional information.

1. Open Visual Studio Code.
2. Press Command + Shift + P to open the Command Palette.
3. Type flutter in the Command Palette.
4. Select Flutter: New Project.
5. Follow the installation process and make sure to select ~/development/ as the folder to install Flutter. ( I tried other folder names and faced some crazy errors like Flutter Unknown Channel and stuff.)
6. Once Flutter is installed, add the following line to your .zshrc file, replacing the {User Name} with your username in the Mac.

export PATH="/Users/{User Name}/development/flutter/bin:$PATH"

Finally

Close all terminals and open a new terminal. Enter the following command in the terminal.

flutter doctor --android-licenses

Please type Y and press enter. Enter the flutter doctor command; you should have an output like the one below, assuming you already have Google Chrome on your computer.

Thank You for Reading!

If you enjoyed this article and wish to support my work, here’s how you can help:

• Leave a Clap 👋: Your claps greatly encourage me!
• Share Your Thoughts 💬: I’d love to hear your feedback and any questions you might have in the comments below.
• Follow Me: Stay updated with my latest articles by following me on Medium.
• Connect on LinkedIn: Let’s professionally connect! You can find me on LinkedIn.

Your support and interaction mean the world to me, and I look forward to bringing you more useful content!