Skip to main content
shopping_basket Basket 0
Login

Remote Flying Fish Project Part 11: Flutter Installation on MacOS

lokit
0

Before we get started, let's have a look at the outcome we expected.

[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.6 19G2021 darwin-x64,
    locale zh-HK)
    • Flutter version 1.22.4 at /Users/kuro/Frameworks/flutter
    • Framework revision 1aafb3a8b9 (3 days ago), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/kuro/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = /Users/kuro/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0, Build version 12A7209
    • CocoaPods version 1.8.4

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

This is the text output of command flutter doctor -v, which tells you if your computer is good to go on Flutter app development.

In short, you are gonna need:

  1. Flutter v1.22.4
  2. Dart SDK version: 2.10.4 (stable)
  3. Xcode 12.0 (with MacOS 10.15.6 Catalina)
  4. Android Studio v4.0 (with SDK Android 10.0)

Right, this is for MacOS Catalina and you will have to try on your own by switching versions of Flutter and Xcode if you are with older MacOS. I've been stuck by unknown errors caused by Xcode, and eventually tackled after upgrading Xcode from 11.2 to 11.3. So Flutter is kinda bad to us Apple users I'd say ...

Anyways let's get started. If you are using Windows, you should navigate to another chapter instead. If you are using Linux, you can use VM to install Windows/Mac instead.

=======================================================

Now, after knowing the configuration stated above, navigate to the following site and follow the instructions:

terminal screen

*Terminal will be your very good friend if you have not used it before

https://flutter.dev/docs/get-started/install/macos

Here is a summarized version, to install Flutter - you need to:

  1. Download Flutter v1.22.4 from https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_1.22.4-stable.zip
  2. unzip and move to a suitable location
  3. cd into the folder of where you put the unzipped Flutter folder into and type the following command. (`cd` is a linux command, means change directory; example usage: cd ~/Document/myFolder) export PATH="$PATH:`pwd`/flutter/bin"
  4. update-source file using command source $HOME/.bash_profile
  5. check if flutter's path is correctly configured using the command which flutter
  6. close the terminal and restart to repeat step 5 to check again
  7. install Dart v.2.5.0 via HomeBrew (theoretically, you don't need to switch to v2.5.0, as v2.x.x should be compatible with it)
    $ brew tap dart-lang/dart
    $ brew install dart
  8. install Xcode (if you don't have it, get it from App Store)
  9. Download Android Studio fromhttps://developer.android.com/studio
  10. Install Android Studio, simply open the .dmg file and next until it completes
  11. Open Android Studio, go to "Tool" -> "SDK Manager"

    under tools select SDK manager

  12. check Android 10.0 or above and click "Apply" to start downloading.

Basically, you will be able to get similar results, i.e. 3 ticks [✓] and 1 exclamation [!] when running flutter doctor -v comparing to mine.

And you are now ready for the next chapter:

Installation of Flutter on Windows

 Parts in this series

Downloads

lokit has not written a bio yet…

Recommended Articles

DesignSpark Electrical Logolinkedin