Install Flutter on macOS & M1 chip — 2

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

Install Xcode

Xcode is initially a stand-alone IDE by Apple to develop software for Macs, be it front-end, back-end, web or mobile. You need Xcode to develop for iOS. It is huge, 31.58 GB on storage for version 13.3.

Android Studio’s Flutter plug-in, that we’ll install later in Part 3, can launch Xcode and configure it to access the configuration data of a Flutter iOS project. You can develop for iOS in Flutter. You only need to know more about Xcode when you prepare your app ready for submission to App Store.

To download Xcode you need your iCloud account ID and password.

1. Visit the Apple developer website, https://developer.apple.com/download/more/ (don’t forget the last “/”).
2. Sign in with your iTunes/iCloud account id.
3. Select the version that you’d like and download the Xcode_x_x_x.xip file. On March 30th, 2022, the latest version is 13.3 of March 14th. Downloading it will take a while (10.8 GB) depending on your Internet connection.
4. Once the file is downloaded, double-click on the xip to extract it. It will take some time because the complete folder structure of the package is created. The Xcode package is extracted in the same folder you downloaded it in.
5. Drag Xcode.app application to the Applications folder. Rename it by adding the version number, for example Xcode13.3.app.
6. [Optional]. As we have seen in Part 1 when we checked brew config of section “Install Homebrew”, as soon as we have a complex developer environment, with several Xcode on several volumes, we never know for sure which Xcode is being used. It is better to specify this Xcode version as the default environment to use in this context.

kvutien@MBP18VTK ~ % sudo xcode-select -switch /Applications/Xcode13.3.app

Verify with brew config that we are now using this Xcode and this CLT (Command Line Tools) installed on this current volume (compare with the previous brew config section “Install Homebrew”). This will take some time because Xcode installs a bunch of tools and verify them when it runs for the first time.

kvutien@MBP21VTK ~ % brew config

Verify once more that we are using the correct Ruby for ARM64.

kvutien@MBP21VTK ~ % ruby Desktop/rubyM1.rb

Accept Xcode license from the command line.

kvutien@MBP18VTK ~ % sudo xcodebuild -license accept

Note: disregard the strange error message below if it is displayed. it is caused by the xcodebuild of Xcode 13 that has been compiled for Intel64 architecture. Continue installation. It has no impact on the use of Xcode and CocoaPods by Flutter.

objc[12328]: Class AppleTypeCRetimerRestoreInfoHelper is implemented in both /usr/lib/libauthinstall.dylib (0x1f9681eb0) and /Library/Apple/System/Library/PrivateFrameworks/MobileDevice.framework/Versions/A/MobileDevice (0x106e644f8). One of the two will be used. Which one is undefined. ...

For curiosity, this error message is becausexcodebuildis built for Intel X64. See https://stackoverflow.com/questions/70766214/xcodebuild-gives-an-error-for-multiple-implementation-of-amsupporturlconnectiond. The message doesn’t appear anymore if, after installing Rosetta as below, you run xcodebuild from a Terminal that is open using Rosetta (to do it, from the Finder, File > Get Info > checkbox Open using Rosetta).

Install Rosetta 2

Now comes the reason why on Mac M1 we install Flutter by starting installing Xcode: Xcode installs Rosetta 2 that helps using legacy Intel X86_64 code.

Double-click to run Xcode once, that installs Rosetta 2. We are anticipating on the need when later installing the Flutter SDK in Part 3 because in March 2022 the latest stable Flutter still uses a Dart SDK that is still using legacy Intel X64 code.

At first launch, Xcode immediately requires some additional installations before it installs Rosetta 2.

Confirmation additional Xcode components

Click Install. It will ask us to install Rosetta 2. Click again Install.

In the menu Xcode > Preferences…, tab Locations, check that the version of Command Line Tools to use is Xcode 13.3. If it is empty, specify Xcode 13.3.

Set Xcode Command Line Tools location

Install CocoaPods

The Ruby package manager CocoaPods is meant for iOS development. It is used by Flutter’s Dart plugin to call iOS and macOS platform’s plugins. Without CocoaPods, Flutter plugins will not work on iOS or macOS. CocoaPods is an independent project from Google and from Apple: https://cocoapods.org/about

For more info on packages vs. plugins, see https://flutter.dev/platform-plugins.

Install CocoaPods

Remember that we have installed the correct ARM64 Ruby. Install CocoaPods using this Ruby version.

kvutien@MBP21VTK ~ % sudo gem install cocoapods

CocoaPods is installed.

Run the iOS Device Simulator

Control-click the Xcode icon in the Dock, choose Open Developer Tool > Simulator. It will launch by default a simulated iPhone SE. You can open another device in the Simulator’s menu File > Open Simulator > iOS 15.4 > iPhone 13 (for example).

Launch iOS device simulator

Congratulations. Look at the Activity Monitor and observe that on the Mac M1 and with Xcode and the Simulator running, the CPU and memory pressure is still very low.

Install Android Studio

As said above in Part 1, even if you use by preference Microsoft Visual Studio, you still may want to install Android Studio to develop comfortably with Flutter. It integrates an Android Virtual Device Manager, the device emulator and advanced users can debug directly their code running in a physical device, connected by wire or by WiFi.

The link is < https://developer.android.com/studio/> and the file may take long to download (856 MB). Once downloaded and launched, the installer will show you a macOS package to copy to the Applications folder.

Android Studio download screens

The version to download is Android Studio Bumblebee | 2021.1.1 Patch 2 for Mac with Apple chip (~928 MiB). Once downloaded and extracted, move the Android Studio app to the Applications folder.

Android Studio installer screen

Launch the application Android Studio by double-clicking from the macOS Finder. A setup wizard will guide you (see figures below). The Android Studio configuration will also install the Android SDK plugin for Android Studio (see Title image) but not yet the Flutter SDK and plugin.

Click Next. Accept ALL 3 license agreements. Select each of them on the left panel and click their radio button Accept on the right until the button Finish is enabled.

The Android Studio welcome screen appears. Notice that it still has no button to create a Flutter project yet, only an Android project. We still have to install the Flutter SDK and plugin of Android Studio. We will do that in Part 3, from the Finder.

Install Flutter SDK and plugin

See Part 3, for the installation of Flutter itself and the first sample Flutter project and run it on both iOS simulator and Android emulator.

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