Install Flutter On MacOS With M1 Chip - LinkedIn

Có thể bạn quan tâm

Agree & Join LinkedIn

By clicking Continue to join or sign in, you agree to LinkedIn’s User Agreement, Privacy Policy, and Cookie Policy.

Create your free account or sign in to continue your search

Welcome back

Email or phone Password Show Forgot password? Sign in

By clicking Continue to join or sign in, you agree to LinkedIn’s User Agreement, Privacy Policy, and Cookie Policy.

New to LinkedIn? Join now

By clicking Continue to join or sign in, you agree to LinkedIn’s User Agreement, Privacy Policy, and Cookie Policy.

Skip to main content 8 min read

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, together with Android Studio, is an IDE for general Android development. Android SDK supports the language Kotlin, C++ and Java.
Flutter SDK is a plug-in for Android Studio, that uses the language Dart to generate code that is cross-platform Android and iOS.
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 for Flutter development. 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 SDK up to date. If you use VSCode, whenever you experience a bug there is always a possibility that your Android SDK 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:

[optional] Install macOS and Chrome browser
Install Homebrew
Install Xcode
Install CocoaPods
Install Android Studio
Install Flutter SDK and Flutter plugin for Android Studio
Set up the device emulators for Android and iOS

Refer to the Title illustration blocks 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 than your usual office system, there is a very elegant solution 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 + 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 for programmers named Xcode, which is available separately for download and installation. The full Xcode package is huge, requiring over 40GB 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.

Recommended by LinkedIn

Read&Write App for MS Win, MAC OS, iOS, Google Chrome, Android devices and two other browsers

Read&Write App for MS Win, MAC OS, iOS, Google Chrome,… Gerry Kennedy 6 years ago

DDD North 2022 Peter Bull 3 years ago

Importance of ADB Fastboot Commands for Android: Complete Guide

Importance of ADB Fastboot Commands for Android:… Sphinx Solutions Pvt. Ltd. 1 year ago

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

To install Homebrew on macOS,

Type in Terminal the following shell command (the actual command starts after the %)

kvutien@MBP21VTK ~ % /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Note that we use the shell `bash` instead of `zsh` because this installation script is written for `bash`.

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 in the profile of the shell zsh used in Terminal. The second command actually executes this shell command to apply it to the current executing Terminal. The script `shellenv` adds this installation of Homebrew to our `PATH`, `MANPATH`, and `INFOPATH`.

After installation, check the tools installed along, using the shell command `brew config`. It takes some time because Xcode Command Line Tools library needs to be verified. We observe that our config is indeed based on a 10-core ARM64 and that the CLT were installed.

Development Note: It is good practice to always check your development environment after upgrading macOS. Check that Xcode, Android SDK, Flutter are correct. These critical components may need being reinstalled after any macOS upgrade to work. Most often, at least the Command Line Tools for Xcode needs it.

Install Ruby using Homebrew

We anticipate here 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`)

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`):

require 'rbconfig' OSVERSION = RbConfig::CONFIG['host_os'] ARCH = RbConfig::CONFIG['arch'] HOSTCPU = RbConfig::CONFIG['host_cpu'] BUILDCPU = RbConfig::CONFIG['build_cpu'] TARGETCPU = RbConfig::CONFIG['target_cpu'] puts "OS: #{OSVERSION}" puts "Arch: #{ARCH}" puts "Host CPU: #{HOSTCPU}" puts "Build CPU: #{BUILDCPU}" puts "Target CPU: #{TARGETCPU}"

Quit `nano` with control-X, saving the file. Execute the file :

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.

kvutien@MBP21VTK ~ % brew install tree

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

See Part 2 (install Android Studio and Xcode) and Part 3 (install Flutter) of this tutorial.

Like Like Celebrate Support Love Insightful Funny Comment Share 5 Comments Marcelo Honorio Santos, graphic

Marcelo Honorio Santos 3y

Excelent article!!!! Congratulations!

Like Reply 1 Reaction 2 Reactions Harshada Panchal, graphic

Harshada Panchal 3y

Your article helped me to setup flutter without any problem. Very informative, simple and clean article Thank you very very much 😃😃

Like Reply 2 Reactions 3 Reactions Gipson Mohlongo, graphic

Gipson Mohlongo 3y

Thank you very much Khang Vu Tien, this blog has helped me setup my MacBook Pro with M1 chip, I have been struggling to setup my development environment for long till I came I cross these instructions. This is a must Bookmark because I will need them for future reference. 😀

Like Reply 1 Reaction 2 Reactions See more comments

To view or add a comment, sign in

Others also viewed

React Native — Ultimate Guide on Debugging , Profiling & Advanced Optimization (iOS + Android)
Hiến Đinh 1y
Fatbobman's Swift Weekly #086
Fatbobman Xu 6mo
Top 7 Reasons to Choose Embedded Android for Your Next Project
Abdullah Abdelhakeem 8mo
Why Is It So Difficult to Work with Embedded Software Engineers?
Austin Kim 5mo
Fatbobman's Swift Weekly #095
Fatbobman Xu 5mo
And now for something completely different...
Geoff Hollingworth 1y
My first decade as a professional software developer
Mohammed Ismail Ansari 6y
Xcode Instruments: A Guide to Optimizing Your iOS and macOS Apps 🚀
Wagner Assis 1y
.NET MAUI Performance(Part 1 - Android)
Carlos Gabriel 11mo
Setup development environment on new Mac
Kapil Sharma 5y

Show more Show less

Từ khóa » Cài đặt Flutter Trên Mac M1

Sign in to view more content

Welcome back

TLDR (Too Long Didn’t Read)

Installing Flutter on macOS

General considerations

Installation plan

Option: install macOS anew on a separate volume

Option: install Chrome or Brave

Option: show hidden files and folders

Install Homebrew and preparation tools

Install Homebrew

Recommended by LinkedIn

Install Ruby using Homebrew

Install `tree` using Homebrew

Next steps

More articles by Khang Vu Tien

Explanations of the DeepSeek R1 Technical Paper

Reading Notes of ElizaOS

Inclusive Finance – Machu Picchu Project

How AI can help humanitarian assistance?

What is Artificial Intelligence?

Qu'est-ce que l'Intelligence artificielle ?

No code-no maths: Learn Gen AI (2)

No code-no maths: Learn Gen AI

Inclusive Finance – Machu Picchu Self-Help Protocol [2]

Inclusive Finance – Machu Picchu Self-Help Protocol [1]

Others also viewed

React Native — Ultimate Guide on Debugging , Profiling & Advanced Optimization (iOS + Android)

Fatbobman's Swift Weekly #086

Top 7 Reasons to Choose Embedded Android for Your Next Project

Why Is It So Difficult to Work with Embedded Software Engineers?

Fatbobman's Swift Weekly #095

And now for something completely different...

My first decade as a professional software developer

Xcode Instruments: A Guide to Optimizing Your iOS and macOS Apps 🚀

.NET MAUI Performance(Part 1 - Android)

Setup development environment on new Mac

Explore content categories

Liên Hệ