Install Flutter on macOS & M1 chip — 3

9 min readApr 3, 2022

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 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, this document, 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/

Install Flutter SDK and plugin

The Flutter SDK brings Flutter development tools on Macintosh. Once installed, we can use it from the command line. However, to use it comfortably with Android Studio, we have better install (after Flutter SDK) the Flutter plugin in Android Studio. In the steps below we’ll first install Flutter SDK, and then add the Flutter plugin to Android Studio. We’ll also run our first sample Flutter project on both iOS and Android.

Slight hiccup as of March 2022

Visit the Flutter releases page https://docs.flutter.dev/development/tools/sdk/releases?tab=macos. We notice that the latest stable version of Flutter in March 2022 (Flutter 2.10.4 ZIP file) is still for Intel X64.

There are 3 workarounds:

Use a beta version of Flutter (version that has the ARM64 version of Dart). To do this, visit the Flutter releases page (above) and download the version for ARM64, version 2.12.0–4.1.pre. It’s still beta but is the only Dart ARM64 version as of today.
Install Rosetta 2 to use Dart in X64. This workaround has the advantage to avoid issues with a lot of other tools. It is the recommended choice for new users of Flutter. This is why we let Xcode install Rosetta 2 in the steps of Part 1.
Use the script provided in https://pub.dev/packages/flutter_m1_patcher, to replace the Dart that is bundled with stable Flutter with a later Dart that is ARM64. Beware that you have to execute again this script every time you upgrade Flutter.

Install stable Flutter SDK for macOS

To simplify matters, let’s use workaround 2. The recommended process is to :

Create a folder develop in our $HOME directory.
Download in folder develop the zip file and unzip it.
In the ~/.zshrc file, insert flutter in our $PATH, as following:

using the text editor nano in Terminal, add the line export "PATH=$PATH:[path_of_flutter]/bin" to the file .zshrc (exit from nano with Ctrl-x). For example

export PATH="$PATH:/Users/kvutien/develop/flutter/bin"

then “source” the profile (add the path to the current executing shell). For example

kvutien@MBP21VTK ~ % cd develop 
kvutien@MBP21VTK develop % source $HOME/.zshrc 
kvutien@MBP21VTK develop % echo $PATH

verify that flutter is ready to use. For example, by typing the shell command

kvutien@MBP21VTK develop % which flutter

For curiosity, we display the content of the folder flutter, limited at 2 levels of hierarchy:

kvutien@MBP21VTK develop % tree -L 2

Check the installation with flutter doctor:

kvutien@MBP21VTK develop % flutter doctor

You may still see the strange warning already seen when installing Xcode. Disregard it. Normally, flutter doctor should complain only that the component cmdline-tools of Android Studio is missing and Android license is not accepted. The complaint about CocoaPods is strange because (as we’ll see later) Android Studio still manages to build the iOS app and execute it in the iOS virtual device simulator. Let’s install first the missing SDK cmdline-tools.

Install the Flutter Plugins in Android Studio

Let’s do one last check: type `flutter — version`. We should see the stable version.

kvutien@MBP21VTK develop % flutter --version

In Android Studio, we need the Flutter plugin to build and deploy cross-platform mobile apps for iOS and Android.

Launch Android Studio. In the sidebar choose Plugins then choose Flutter and click Install. Accept the Privacy Note and accept installing Dart plugin, since Flutter programming is uniquely in Dart.

After installation, click the button Restart IDE. Install also the Markdown plugin. It is not useful for development, but it is handy for documentation in Android Studio.

Once done, go to the Installed tab, select Update all plugins. Scroll down when done, observe that the updated Kotlin plugin requires to restart again Android Studio. Click Restart IDE.

Add cmdline-tools component and SDK Tools plugins

On the welcome screen, we observe now that the button New Flutter Project is displayed. The SDK Tools plugins of the IDE still have to be reinstalled or completed.

Click on More actions and select SDK Manager.

In the new window, among the 3 tabs, select the tab SDK Tools
Tick the 4 tools Android SDK Build-Tools (… latest version number), Android SDK Command-line Tools (latest), Android Emulator and Android SDK Platform-Tools. But don’t click OK.

· Don’t click OK; click Apply to install. Confirm by clicking OK.

When installation is done, read the installation report, click Finish, then click OK.
Run again flutter doctor to check that cmdline-tools SDK is installed. We see that we have to accept the licenses of the 4 SDKs. Ignore the complaint that CocoaPods is not recognised. Actually we’ll see that the IDE recognises it.
Accept the licenses of the 4 SDKs

kvutien@MBP21VTK develop % flutter doctor --android-licenses

Get started with Flutter sample app

Run the sample Flutter app on iOS

In the Android Studio welcome screen, click on the button named New Flutter Project. On the side bar select Flutter and click on Next. In the next dialog box give the project a name, for example sample_flutter. The name must be lower case and uses exclusively underscore to separate words, to be accepted by Dart.

Click on Finish. Make sure that you have the iOS simulator running. In the IDE project window that will open, clicking on the Run button launches the build, load and execution on the simulated iOS device (iPhone 13 by default).

Note: We observe that Android Studio succeeded to build for iOS and run the device simulator despite the strange error message of flutter doctor about CocoaPods. If we run flutter doctor again, we still see this message. It shows the benefit of using a stable version of Flutter. Else we’d have wasted time to investigate the beta Flutter, to discover that the problem is actually in Xcode 13 and in Apple’s transition to M1.

Sample Flutter project IDE & iOS simulator

Check that the Hot reload button of Android Studio (the yellow bolt) is not grayed out. Let’s change the code to see how “hot reload” works. Modify the prompt text in ~/develop/sample_flutter/lib/main.dart, from ‘ You have pushed the button this many times:’ to the text ‘ The “+” button:’. Observe that the simulator has changed the text immediately without even needing to save the code first (“hot reload”).

Run the sample Flutter app on Android

In Android Studio select the menu Tools > Device Manager. It does the same as clicking on the button Virtual Device Manager in the toolbar. In the panel Device Manager, observe that by default a virtual device named Pixel_3a_API_32_arm64-v8a is already created. In the column Actions, launch the emulation of this device by clicking on the green triangle. It launches the virtual Android device in another panel of the same IDE window. It doesn’t run yet the sample app.

In the IDE toolbar, stop the iOS app with the red square button. In the dropdown selector, replace the iPhone13 with sdk gphone64 arm64. Click on the button Run. Observe the build and execution of the app in the emulated Android device.

Congratulations: you made and executed your first multi-platform mobile app.

Advice: Change device memory size in Android emulator

The default parameters for Android Studio projects may lead to mysterious bugs. One of them is the RAM of the Virtual Devices.

The default ARM emulator gives 1.5 GB memory to any device. For the Android apps already created by default, this amount is too little for the mobile apps built by M1 Android Studio with full debugging code (~170 MB) and sent to the virtual device. It will raise a “lack of memory” exception.

Edit the virtual device in Android Studio, using the menu Tools > AVD Manager.
In the AVD Manager, rightmost button, choose Edit. Click on the button Show Advanced Settings. Scroll down to the section Memory and Storage, to increase the RAM. If needed, change also the Internal storage that is the space available to store data on the device.

Click on Finish to store the new parameters.

Housekeeping: assign SDK in Project Structure

Another source of mysterious bugs is the default Project SDK in the Android Studio menu File > Project Structure. By default there is no SDK assigned but Flutter development requires the latest Android API.

In the dropdown selector, choose Android API 32 Platform version 11.0.1 and click OK.

In menu File > Invalidate caches… check the box Clear file system caches and Local History and click on Invalidate and Restart to restart Android Studio.

In general, it is good practice to invalidate caches and restart the IDE whenever you update the Android SDK version, which happens twice per year.

Where do we go from here now?

Follow the free course Flutter Apprentice

–highly recommended free book– Flutter Apprentice. ( https://www.raywenderlich.com/books/flutter-apprentice/v2.0).

However, the first lesson of this book, how to install Flutter, is weak. True beginners may be discouraged. This is why I made this tutorial. The rest of the book is excellent.

Join Machu Picchu

Machu Picchu is an open-source and collaborative project. The purpose is to leverage the tools of the 21st century (blockchain, IPFS, mobile, low consumption Raspberry’s, satellite Earth Observation) to let the persons-in-need take care of their own data and their own money. https://youtu.be/MRz5oKHRg-8. It is a perfect side job to show your programming skills, for good.

Today, humanitarian assistance is managed in a centralised manner. When a central organism manages data and money on behalf of others, it must comply with heavy regulations: AML/CFT, GDPR, Basle 2 etc. This increases the costs.

With Machu Picchu’s toolbox, each person-in-need and each village can take care of themselves, at a very low cost. The humanitarian assistance organisations can take care at a higher level, where they are the most efficient.

Join Machu Picchu. https://kvutien-yes.medium.com/machu-picchu-white-paper-af58afb6efad

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