[Flutter] Mac にインストールして開発環境を構築する

Mac で Flutter の開発環境を構築する

MacOS install – Flutter

Flutter の開発を MacOS で行えるように開発環境を構築します。手順は上の公式サイトのページを参考にします。

Flutter SDKダウンロード

ここから最新のSDKをダウンロードします。

$ cd ~/
$ unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip

ダウンロードしたら適当なディレクトリで解凍します。今回はホームディレクトリに解凍しました。上のコマンドはバージョンを各自のダウンロードしたバージョンに合わせて指定してください。別にコマンドで解凍しなくてもいいです。

Safariだと勝手にZIPが解凍される場合があります。その場合は解凍されてできたディレクトリを移動します。

$ mv ~/Downloads/flutter flutter

SDKにパスを通す

上でホームディレクトリに解凍したディレクトリにパスを通します。通すのは “flutter/bin” です。

$ export PATH="$PATH:`pwd`/flutter/bin"

これで flutter コマンドが利用可能になります。

flutter doctor

flutter doctor コマンドは Flutter 開発に必要な環境が揃っているかチェックしてくれる便利コマンドです。これを実行します。パスが通っていればうまく実行できるはずです。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14.4 18E226, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 26.0.2)
    ✗ Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
      To update using sdkmanager, run:
        /Users/mntm/Library/Android/sdk/tools/bin/sdkmanager
        "platforms;android-28" "build-tools;28.0.3"
      or visit https://flutter.io/setup/#android-setup for detailed
      instructions.
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
[!] Android Studio (version 3.2)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.33.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

こんな感じで必要なツールのインストール状況が確認できます。基本的には言われた通りにツールをインストールすればOKです。

Android の開発環境を作る

まずは Android の開発環境を作ります。 flutter doctor から指摘されたのは以下の通り。

[!] Android toolchain – develop for Android devices (Android SDK version 26.0.2)
✗ Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
To update using sdkmanager, run:
/Users/mntm/Library/Android/sdk/tools/bin/sdkmanager
“platforms;android-28” “build-tools;28.0.3”
or visit https://flutter.io/setup/#android-setup for detailed
instructions.
✗ Android licenses not accepted. To resolve this, run: flutter doctor
–android-licenses

まず、Android の開発のために Android Studio (v3.2以上) をインストールする必要があります。Android Studio を使わず VSCode で開発する場合も Android SDK等をインストールする関係上必要になります。

Download Android Studio and SDK tools

Android SDK 28 が必要みたいなのでインストールします。Android Studio を起動して SDK マネージャーを起動して SDK の バージョン28を追加します。

SDK Platforms: Android API Level 28
SDK Tools: Android SDK Build-Tools 28

色々と項目がありますが上の２つは必須だと思います。あとエミュレーターも使うのであればインストールしておきましょう。とにかく flutter doctor の言う通りに必要なツールを入れていきます。flutter doctor が 問題があるかどうかを判断してくれるので非常に簡単に進められます。

 ! Some Android licenses not accepted.  To resolve this, run: flutter doctor –android-licenses

全てインストールしても上のような警告が flutter doctor から出る場合があります。これはライセンスの承諾が住んでないという内容で、書いてある通り、flutter doctor –android-licenses というコマンド一発で承諾できます。

[✓] Android toolchain

flutter doctor で上のようにチェックがつけば Android のツールチェーンの準備は完了です。あとは開発用のエディタを準備します。ここでは VSCode を使いますが、Android Studio を使いたい人は flutter doctor の言う通りにツールをインストールすればいいです。

Visual Studio Code

Visual Studio Code – Code Editing. Redefined

インストールがまだの人は上のページからDLしてください。

インストールできたら拡張機能をインストールします。Flutter , Dart この２つの拡張機能が必要です。それぞれ検索すれば1番に出てくるツールです。入れたら flutter doctor に確認します。

[✓] VS Code (version 1.33.1)

こんな感じで VS Code にもチェックがつけばOKです。これで最低限の開発環境は整いました。デバッグポイントを貼ってのデバッグやエミュレーターの起動も VS Code 上から行うことができます。

WindowsでFlutter入門(開発環境構築～デバッグ実行まで) │ Web備忘録

上の記事でプロジェクト作成、エミュレーター起動〜の手順をまとめていますのでよかったら参考にどうぞ。

以上。