Amazon.co.uk Widgets
Flutter Logo - Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.

Installing Flutter 3.0 on a Mac Studio running macOS Monterey

Running the flutter 3.0 based 'Hello, world' app on a macOS computer with Apple silicon .

Flutter 3.0 can now create macOS desktop apps which run on Mac computers with Apple silicon. This is the hello world example app.

TL:DR— Getting this running took around a dozen commands, and a bit of default question answering and installer clicking for Flutter, Xcode and Android Studio, both of which you have to launch at least once after installation. It took about 15 minutes to set it up. I use a folder called 'Projects' in my home directory but you can choose whatever name makes sense for you.

Xcode

You need to have Xcode and its command line tools installed in order to build macOS or iOS or iPadOS apps. Go ahead and download it from the App Store. run it once, Check Software update after running it and download the Command line tools. To be fair, this takes more than fifteen minutes, so lets not count it in the time to complete as you probably already have it!

Android Studio

Installing Android Studio installs all the Android development tools you need to develop Android apps. It is the easiest way to manager all these dependencies.

  • Download and install (or update) Android Studio. The latest release is a universal app so it supports Mac computers with Apple silicon. You can Download Android Studio and SDK tools from the Android Developers website.
  • Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android. Make sure you have the SDK Command-line tools installed!
  • Android Studio Configure > SDK Manager will tell you where your sdk is installed. You need this path later.

Flutter

  • Get the Flutter SDK making sure you choose the zipfile for Mac computers with Apple silicon! You can ignore the warning about Rosetta unless you need CocoaPods for iOS plugins. You don't need this to compile the demo app for macOS.
  • Use terminal to enter the commands to configure your system for flutter and run your first app.
    % cd ~/Projects
    % unzip ~/Downloads/flutter_macos_arm64_3.0.x-stable.zip
    % export PATH="$PATH:`pwd`/flutter/bin"
    % flutter config --no-analytics
    % flutter doctor
    
  • Resolve any issues Flutter Doctor reports.
    $ flutter config --android-studio-dir /Applications/Android\ Studio.app
    % flutter config --android-sdk /replacethiswiththepathtoyour/Library/Android/sdk
    % flutter doctor --android-licenses
    % flutter config --enable-macos-desktop
    % flutter doctor
    
  • Create and run your first app
    % cd ~/Projects
    % flutter create hello_world
    % cd hello_world/
    % flutter run -d macos
    
  • Congratulations! Thats it!

Step by Step instructions to install Flutter 3.0 on a Mac computer with Apple silicon

  • In my experience, by far the easiest way to install Flutter is to install Android Studio first since it deals with all the Android dependencies you will need.
  • Complete Android Studio first run setup, let it download all the things it needs, check for updates and finish.
  • Make flutter part of your environment, by adding the path to your .zsshrc by adding the line export PATH="$PATH:/pathtowhereflutteris/flutter/bin""You'll need to restart your terminal for this to take effect.
  • Nobody likes being tracked, least of all by Google. You can turn it off.flutter config --no-analytics
  • Tell Flutter about Android Studio by typing flutter config --android-studio-dir /Applications/Android\ Studio.app
  • You'll need to accept the Android licenses to use Android Studio. Type flutter doctor --android-licensesand agree each one. If this command doesnt work, check you have the Android Command-line tools correctly installed.
  • Almost there. Flutter needs to be told to enable macos support so type flutter config --enable-macos-desktop
  • Check your config using flutter doctorand of course fix any resulting issues.
  • Navigate to your project folder or any folder you want to create your first app in. cd ~/Projects
  • Use the create command to instantiate an app based on one of the example templates, type flutter create hello_world
  • Change into its directory, cd hello_world/
  • Run your first macos app created in Flutter flutter run -d macos
  • Open your app build folder in Finder, open ~/yourfolder/demo/build/macos/Build/Products/Debug and choose File -> Get Info ( ⌘ I ) on the binary you just created.
  • You will see the Application Kind is 'Apple Silicon'.
Get Info showing that the app built is for Apple Silicon
Flutter 3.0 output an binary for Apple silicon.

Android Studio

  • To build Android apps, be sure to select the Android SDK platforms of interest. Note also that you can see (and copy to the clipboard) the Android SDK location which you need to let Flutter know about.
    Android Studio, SDK PLatforms screenshot.
  • Make sure you select Android SDK Command-line Tools - it is not selected by default and Flutter needs it.
    Android Studio, SDK Tools screenshot

Flutter Doctor output

% flutter doctor
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.0, on macOS 12.3.1 21E258 darwin-arm, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[!] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart
        side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.

Flutter Devices output

I am used to seeing mobile devices here. It really is running macOS as a development target (as well as Chrome!).

% flutter devices
2 connected devices:

macOS (desktop) • macos  • darwin-arm64   • macOS 12.3.1 21E258 darwin-arm
Chrome (web)    • chrome • web-javascript • Google Chrome 101.0.4951.64

See also

Get the Flutter SDK
Mac computers with Apple silicon
Download Android Studio and SDK tools  |  Android Developers