Install Flutter on macOS with M1 chip

Flutter architecture

There are many tutorials how to install Flutter on a Mac with the M1 chip. The added-value of this step-by-step tutorial is that (1) all steps have been tested on a clean install and (2) the reason of each step is explained along with its role in the big picture. It helps debugging of installation and development errors, and makes easier the transition to free hands-on Flutter programming courses such as this -highly recommended- book Flutter Apprentice ( https://www.raywenderlich.com/books/flutter-apprentice/v2.0).

Update of September 19, 2022: The updated version for Flutter 3.3 is here: https://www.raywenderlich.com/books/flutter-apprentice. Kudos and thanks to the Ray Wenderlich team.

• Part 1, this document, presents the general view of the components that are installed and shows how the install the indispensable preparation tools.
• Part 2 guides the installation of the 2 IDE Xcode and Android Studio.
• Part 3 covers the installation of Flutter itself in Android Studio, along with housekeeping best practices.

To install Flutter on other platforms, I recommend the e-book https://www.wowebook.org/flutter-recipes/

TLDR (Too Long; Didn’t Read)

• Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia (future Google’s smartphone OS, after Android and Chrome OS) and the web, using a single codebase.
• Macintosh M1 is the new generation of Apple computers using ARM64 chips. It has been introduced in 2020. Apple plans to replace by 2022 all the Intel-based line of products (X86_64) with ARM64-based machines.
• Flutter is changing quickly to catch up with the rapid evolution of macOS. The documentation is not always up to date. There might be some surprises.
• Because Flutter generates code that is compatible with Android and iOS, the Flutter programmer needs to have some knowledge of both development environments. This understanding is useful as early as when installing Flutter, and is indispensable when packaging the apps for public submission to Play Store and App Store.

This tutorial contains explanations to better understand the purpose of each step. It also has work-arounds to address the imperfect state of the tools, at the date of April 2022. We will install successively each of the coloured boxes that compose the Flutter development environment shown in the Title image. Let’s see what each box covers.

• Android Studio is an IDE (Integrated Development Environment), like Visual Studio.
• Android SDK is a development kit for general Android development. Android SDK supports the language Kotlin, C++ and Java. It has a plugin for Android Studio,
• Flutter SDK is a development kit that uses the language Dart to generate code that is cross-platform Android and iOS. It has a plugin for Android Studio,
• Xcode is an Apple IDE for iOS development. It supports the languages Swift, C, C++, Objective-C, Objective-C++, Java, Ruby, Python.
• CocoaPods is a package (external module) manager written in Ruby for iOS development, like Gradle for Kotlin (included in Android Studio) or NPM for JavaScript.

Installing Flutter on macOS

General considerations

I’m a fan of Visual Studio Code. I use it for blockchain, React and general-purpose development. There are excellent Flutter plugins for VSCode, so you may want to keep using VSCode to develop with Flutter. However, I’d recommend that an average programmer who has no Flutter experience rather uses Android Studio to develop with Flutter. Android Studio user interface is very similar to VSCode.

The reason is that Flutter evolves very fast to keep up with Apple’s changes and Android Studio does a better job keeping its Flutter plugin up to date. If you use VSCode, whenever you experience a bug there is always a possibility that your Android plugin is not up to date.

In a similar reasoning, most developers are tempted to use directly command line instructions to solve an issue during Flutter installation and execution. However, it is wiser to look for a solution first in Android Studio menu items because they invoke the Flutter commands more thoroughly than does the average programmer. The whole construction involving Android and Xcode is complex, if you miss a command line option here, there are chances that you mess up the whole system and have to reinstall from scratch.

Installation plan

Although each IDE (Android Studio, Flutter SDK, Xcode) is a world by itself, if you follow the logical order of installation, each component will be nicely aware of the previous ones. The order we will follow is:

1. [optional] Install macOS and Chrome browser
2. Install Homebrew
3. Install Xcode
4. Install CocoaPods
5. Install Android Studio
6. Install Flutter SDK and Flutter plugin for Android Studio
7. Set up the device emulators for Android and iOS

Refer to the component blocks of the Title image and observe that the logic of this sequence maps the relations between the blocks.

We’ll do the installation on a clean MacBook Pro with M1 Pro chip, on macOS 12.3.1 that is the latest one available in March-April 2022.

Option: install macOS anew on a separate volume

If you prefer (like me) to boot from a separate development volume rather than your usual office system, there is a very elegant solution answering to this need, starting from macOS High Sierra. With the APFS file system, you can create on the same partition a distinct boot volume that will be sized dynamically on demand. This is what I’m doing to test this clean install.

Option: install Chrome or Brave

For pure Flutter development, any browser can do the job but if you want to add blockchain functions to your mobile, be aware that most cryptos wallets do not support Safari’s local browser storage. Mozilla Firefox does, but it hogs memory and CPU even when not active. This is why most developers prefer using Chrome or Brave. They have also better debugging tools.

Option: show hidden files and folders

As developer, we need access to hidden system files. In the Finder, type Command + Option + Shift [ dot] to show hidden files.

Also, make the Finder show the Library folder by the menu View > Show View Options… and check the box Show Library Folder.

Install Homebrew and preparation tools

Install Homebrew

Homebrew is a set of scripts written in Ruby on Rails language. The reasons you may want to install Homebrew are:

• Out of the box, a Mac doesn’t contain the software and tools needed for programming. Instead, Apple provides a complete development environment named Xcode, which is available separately for download and installation. The full Xcode package is huge, requiring over 40 GB of disk space, and supports development for all Apple operating systems.
• Many software developers, particularly web application developers, are using Macs but aren’t developing software for Apple devices. They still need the Unix-like tools and utilities installed with the Xcode package. Fortunately, Apple provides a separate and much smaller download, the Xcode Command Line Tools (CLT), that installs the most-needed utilities for software development. See a complete list here: https://mac.install.guide/commandlinetools/8.html.
• Still, there might be additional programming languages and utilities that don’t come installed on macOS and are not included in the Xcode CLT package. This is where you can use Homebrew, the popular Mac package manager, to install almost any open-source developer tool. Homebrew will install Xcode CLT as part of its installation process. When you install Homebrew, you might as well let Homebrew install Xcode CLT for you.

There is a comprehensive guide to install Homebrew: https://mac.install.guide/homebrew/index.html.

To install Homebrew on macOS, type the following command in the first line of this sample output (Note that we use the shell bash instead of zsh because this installation script is written for bash). Here is an example of output:

• After installation, check that brew is not yet in our $PATH

kvutien@MBP21VTK ~ % brew config 
zsh: command not found: brew

• Follow the instruction at the end of the installation output to add it to our $PATH, by typing the commands:

kvutien@MBP21VTK ~ % echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/kvutien/.zshrc 
kvutien@MBP21VTK ~ % eval "$(/opt/homebrew/bin/brew shellenv)"

The first command adds a shell command to the file.zshrc that is run every time you launch Terminal. The second command actually executes this shell command to apply it to the current executing Terminal. The Homebrew script shellenv adds this installation of Homebrew to our environment variablesPATH, MANPATH, and INFOPATH.

After installation, check the tools installed along, using the same shell command brew config as above. It takes some time because Xcode Command Line Tools library installs a bunch of tools that need to be verified. We observe that our config is indeed based on a 10-core ARM64 and that the CLT were installed. Here is an example of brew config output:

Developer Housekeeping advice

It is good practice to always check your development environment after upgrading macOS or Android Studio, or Flutter SDK.

After macOS upgrade:

• check with brew config that the CLT are of the same version as Xcode
• check that the $PATH of Flutter and Dart haven’t been modified and are still the same roots, run the shell command

kvutien@MBP21VTK ~ % which dart flutter
/Users/kvutien/develop/flutter/bin/dart
/Users/kvutien/develop/flutter/bin/flutter

• · check that the $PATH of the Ruby interpreter is still the ARM64 Ruby that you made with Homebrew. Else rebuild it (see below).

kvutien@MBP21VTK ~ % which ruby
/opt/homebrew/opt/ruby/bin/ruby

After Android Studio upgrade, open a Flutter project and

• in the IDE, check that there are no red squiggles showing a reference error or a syntax error
• in File > Project Structure…, check the versions of the SDK plugins
• in File > Invalidate cache… > clear system cache and Local History
• in Tools > SDK Manager, check that you are using the latest SDK’s

Install Ruby using Homebrew

We anticipate here a quirk in the Apple environment: it is not recommended in general to use for development the Ruby that is bundled with macOS: https://www.freecodecamp.org/news/do-not-use-mac-system-ruby-do-this-instead/

Another compelling reason not to use the Apple-bundled Ruby to install CocoaPods: the bundled Ruby for M1 Mac has been compiled with Intel X86_64. Therefore, this ARM64 Ruby calls by mistake the X86_64 version of the package ffi (Foreign Functions Interface) and throws an exception. See more detailed explanations here: https://kvutien-yes.medium.com/a-surprise-when-moving-to-a-mac-m1-1b6033d93c48.

The steps to prepare Ruby for installing correctly CocoaPods are:

• Install your own version of Ruby with Homebrew by running the shell command $ brew install ruby
• Check the exact location of Homebrew with the shell command $ brew --prefix (it should give /opt/homebrew)
• Add to the file .zshrc the command $ echo 'export PATH="/opt/homebrew/opt/ruby/bin:/opt/homebrew/lib/ruby/gems/3.0.0/bin:$PATH"' >> ~/.zshrc
• Run the shell command $ source ~/.zshrc, or restart the Terminal
• Check that you will run the correct Ruby, use the shell command $ which ruby (it should give /opt/homebrew/opt/ruby/bin/ruby)

Example of output when creating a pure ARM64 Ruby:

Check that the Ruby we use is compiled for ARM64. For this, use the macOS editor nano to create the following file rubyM1.rb and store it on Desktop ($nano ~/Desktop/rubyM1.rb):

Quit nano with control-X, saving the file. Executing the file gives :

kvutien@MBP21VTK ~ % ruby Desktop/rubyM1.rb 
OS: darwin21 
Arch: arm64-darwin21 
Host CPU: arm64 
Build CPU: aarch64 
Target CPU: arm64

The last 5 lines are the output, showing that our Ruby has been compiled for the correct architecture ARM64.

Install `tree` using Homebrew

With Homebrew installed, it is handy to use it to install tree, that we’ll use very frequently to list recursively the content of a folder. here is an example of output:

Once done, we display for illustration the content of the folder homebrew, limited to 1 level of hierarchy:

kvutien@MBP21VTK ~ % tree /opt/homebrew -L 1

Next steps

We have prepared the clean macOS for Flutter installation. Continue with Part 2 (install Android Studio and Xcode) and Part 3 (install Flutter) of this tutorial.

Originally published at https://www.linkedin.com.