Installing Flutter 2.2 on macOS Big Sur 11.3.1
Runnning a flutter 2.2 based 'Hello, world' app on macOS.
Flutter 2.0 can now create macOS Big Sur desktop apps, This is the hello world example app.
TL:DR— Getting this running took around a dozen commands, and a bit of default question answering in both Flutter and Android Studio, which you have to launch once it has been installed. It assumes you already have Xcode installed and its command line toole. 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.
Contents
Android Studio
- Download and install Android Studio.
- 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
- Download Flutter from flutter.dev
- Use terminal to enter the commands to configure and run your first app
cd ~/Projects
$ unzip ~/Downloads/flutter_macos_2.2.0-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
$ cd ~/Projects
$ flutter create hello_world
$ cd hello_world/
$ flutter run -d macos
TL:DR Thats it!
Step by Step instructions to install Flutter 2.2 on macOS Big Sur 11.3.1
- By far the easiest way to install Flutter is to install Android Studio first
- Complete 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
.bashrc
export PATH="$PATH:/pathtowhereflutteris/flutter/bin""You'll need to restart your terminals or old school source it 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 confir 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
Android Studio
Make sure to select the Android SDK platforms of interest. Note also that you can see (and copy to the clipboard) the Android SDK location.
Make sure you select Android SDK Command-line Tools - it isn't selected by default and Flutter needs it.
Flutter Doctor output
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.0, on macOS 11.3.1 20E241 darwin-x64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc4)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] Connected device (2 available)
• No issues found!
Flutter Devices output
I am used to seeing mobile devices here. It really is running macOS Big Sur as a development target (and Chrome!).
% flutter devices
2 connected devices:
macOS (desktop) • macos • darwin-x64 • macOS 11.3.1 20E241 darwin-x64
Chrome (web) • chrome • web-javascript • Google Chrome 90.0.4430.212