[MacOS] Flutter installation

2021-03-28 hit count image

Let's see how to install Flutter on MacOS.

Outline

Flutter is a cross-platform mobile app development platform like React Native. We can develop iOS app and Android app with single code base. Recently, Flutter supports the web and they extend the support devices more and more.

In this blog post, we’ll see how to install Flutter on Mac to develop the app with it. If you use other OS, please see the official document on the link below.

VScode

Normally, I use VSCode to deveolp the app with Flutter. If you don’t use specific tools, I recommend to use VSCode. Execute the command below to install VSCode.

brew cask install visual-studio-code
sudo xattr -dr com.apple.quarantine /Applications/Visual\ Studio\ Code.app

And then, execute the command below to install the Flutter extension.

code --install-extension dart-code.flutter

Xcode

Flutter is a cross-platform mobile app development platform, so we can develop iOS app wit it. when we develop iOS app with Flutter, we’ll use iOS simulators and deploy the app via Xcode. So, we need to install Xcode to develop the app with Flutter.

Install Xcode via the link above, and execute the command below to configure Xcode after installing.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo xcodebuild -license
sudo gem install cocoapods

Android Studio

Also, we can develop Android app with Flutter. But, we need Android emulators and Android Studio to deploy the app.

Download and install Android Studio via the link below.

Flutter SDK installation

We need to install Flutter SDK to develop the app with Flutter. First, create a folder for downloading Flutter SDK.

mkdir ~/development
cd ~/development

After creating the folder, execute the command below to clone the Flutter SDK.

git clone https://github.com/flutter/flutter.git -b stable

Or, you can download the Flutter SDK via the web.

curl -O https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_2.0.3-stable.zip
unzip flutter_macos_2.0.3-stable.zip

Configure Path

Next, we need to configure the Flutter SDK path to use it. Execute the command below to open the configuration file for adding the path.

code ~/.zshrc

And then, add the below to the end of the file.

...
export PATH=$HOME/development/flutter/bin:$PATH

Install dependency

Now, we need to install the dependency SDK and Tools to develop the app with Flutter. Execute the command below to install the dependency for Flutter.

flutter doctor

If you download the Flutter SDK via git clone, Flutter SDK will be built, so it takes time. If you download the SDK via the web, the built is included, so the process will be faster.

After executing, you can see the result like below.

[✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale en)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.54.2)
[✓] Connected device (1 available)

I have an error on Android toolchain. The error message shows the solution to configure Android toolchain, so execute it like below.

flutter doctor --android-licenses

And then, execute the flutter doctor again, we can see all installations succeed.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.54.2)
[✓] Connected device (1 available)

So, flutter doctor helps us to install the required SDK or tools for Flutter.

Check

After all installations, create a Flutter app simply and check the app is executed well. Execute the command below to create an app wit Flutter.

flutter create my_app

After it, open the Android emulator or iOS simulator. And then, execute the command below.

cd my_app
flutter run

You can open the iOS simulator with the command below.

open -a Simulator

You can open the Android simulator with the command below.

emulator -list-avds
emulator -avd @name-of-your-emulator

Complete

Now, we’re ready to develop an app with Flutter. Next, let’s study Dart and develop the app with Flutter!

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

Posts