Flutterの開発環境構築方法(Mac)

はじめに

本記事は エムティーアイ Advent Calendar 2021 の1日目の記事です。

Flutterの開発環境を構築する方法を紹介します。

ちなみに業務ではFlutterを一切触っていません。
昨日行われた FlutterKaigi のハンズオンで初めてFlutterを触り、その準備時に行ったことを残します。

環境

• OS：macOS Big Sur 11.6
• ハード：MacBook Air (M1, 2020)
• Flutter：2.5.1

開発環境の構築

公式ドキュメントに沿ってFlutterの開発環境を構築します。

Flutter SDKのダウンロード

以下のページから、使いたいバージョンのFlutter SDKをダウンロードします。

特に決まりがなければ、Stable channelの最新を使うのがいいと思います。

ダウンロードが完了したら解凍します。
場所はどこでもいいですが、本記事では公式ドキュメント通り ~/development フォルダを作成して、そこに展開します。

以下はStable channelの 2.5.1 を解凍する例です。

$ cd ~
$ mkdir development
$ cd development/
$ unzip ~/Downloads/flutter_macos_2.5.1-stable.zip

Flutter SDKのパスを通す

Flutter SDKを展開したら、パスを通します。

私はBashを使っているので .bash_profile に以下を追記します。

.bash_profile

+ export FLUTTER_HOME="${HOME}/development/flutter"
+ if [ -d "${FLUTTER_HOME}" ]; then
+   export PATH="${FLUTTER_HOME}/bin:$PATH"
+ fi

.bash_profile を再読み込みし、 flutter --version でバージョンが出力されたらOKです。

$ source ~/.bash_profile 
$ flutter --version
Flutter 2.5.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ffb2ecea52 (2 months ago) • 2021-09-17 15:26:33 -0400
Engine • revision b3af521a05
Tools • Dart 2.14.2

どうやらDartもFlutter SDKに同梱されているようです。

flutter doctorを実行する

flutter コマンドが使えるようになったら flutter doctor を実行して、他にインストールすべき依存関係がないか確認します。

太字で×が付いたタスクがあればそれを実行します。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.1, on macOS 11.6 20G165 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Xcode - develop for iOS and macOS
    ✗ 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
    ✗ Unable to find bundled Java version.
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.60.0)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

最初は4つ×があったのですが、2つ解決したので2つのみ×が出力されています。
でも解決した2つとも覚えているので、それらの対応を紹介します。

ちなみに私はXcodeとAndroid Studioをインストール済でした。
未インストールの人は、インストールから行うよう指示されるはずです。

Android SDK Command-line Toolsがインストールされていない

以下のエラーが出力された場合、Android SDK Command-line Toolsがインストールされていません。

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.

Android Studioから「Android SDK Command-line Tools (latest)」をインストールすればOKです。

Androidのライセンスに同意していない

以下のエラーが出力された場合、Androidのライセンスに同意していません。

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses

エラーの内容通り flutter doctor --android-licenses を実行し、必要なライセンスにすべて同意します。

$ flutter doctor --android-licenses
3 of 7 SDK package licenses not accepted. 100% Computing updates...             
Review licenses that have not been accepted (y/N)? y

Accept? (y/N): y

再度コマンドを実行して「All SDK package licenses accepted.」が出力されればOKです。

$ flutter doctor --android-licenses
All SDK package licenses accepted.======] 100% Computing updates...   

CocoaPodsがインストールされていない

以下のエラーが出力された場合、CocoaPodsがインストールされていません。

[!] Xcode - develop for iOS and macOS
    ✗ 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.

私はrbenv + BundlerでCocoaPodsを管理したいので、こちらのエラーは無視しました。

Flutterによる開発ではCocoaPodsをグローバルインストールするのが一般的なのでしょうか？
もし知っている人がいたら教えてほしいです。

Android Studioに同梱されているJDKが見つからない

以下のエラーが出力された場合、Android Studioに同梱されているJDKが見つかりません。

[!] Android Studio
    ✗ Unable to find bundled Java version.

結論からいうと、こちらのエラーは解決できませんでした。
解決方法をご存知の人がいたら教えてほしいです。

参考までに試したことを残しておきます。

どこかのタイミングでAndroid Studioに同梱されているJDKのパスが変わったのが原因だと思い、その対応を行いました。

- /Applications/Android\ Studio\.app/Contents/jre/jdk/Contents/Home
+ /Applications/Android\ Studio\.app/Contents/jre/Contents/Home

私はAndroidアプリ開発以外でJavaを使わないため、 .bash_profile で JAVA_HOME にAndroid Studioに同梱されているJDKをセットしてパスを通します。
以前の jdk を含んだパスを指定します。

.bash_profile

+ export JAVA_HOME=/Applications/Android\ Studio\.app/Contents/jre/jdk/Contents/Home
+ if [ -d "${JAVA_HOME}" ]; then
+   export PATH="${JAVA_HOME}/bin:$PATH"
+ fi

このままだとパスが見つからないので、以前のパスにシンボリックリンクを貼ります。

$ cd /Applications/Android\ Studio\.app/Contents/jre
$ ln -s ../jre jdk
$ ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk
$ cd -

これで JAVA_HOME をセットしてパスを通せたのですが、それでも解決されませんでした。なぜでしょうか…。

Android Studioプラグインのインストール

Android StudioにFlutterのプラグインをインストールします。

プラグインの「Marketplace」タブを開き、「flutter」で検索すると簡単にインストールできます。

Dartのプラグインが必要だといわれるので、「Install」を押下します。

Android Studioを再起動し、「Installed」タブに「Dart」と「Flutter」があればOKです。

ちなみにどちらのプラグインもOSSで開発されています。

おまけ: Flutter SDKの管理ツール

本記事ではFlutter SDKを手動で管理していますが、それだと複数のプロジェクトで異なるバージョンを使いたいときに困ります。
Flutterには fvm や asdf などの管理ツールがあり、これらを使うことで手動管理のデメリットを解消できます。

TwitterでFlutter SDKをどのように管理しているかアンケートを取ってみました。

結果はfvmが最も多かったです。
ただasdfも流行ってきているとのことなので、各管理ツールのメリットやデメリットを調査し、プロジェクトに合ったツールを選定するのがよさそうです。

おわりに

まだ不十分なところもありますが、Flutterの開発環境が構築できました！
FlutterでUIを気持ちよく組み立てていきましょう

以上 エムティーアイ Advent Calendar 2021 の1日目の記事でした。

参考リンク

• https://twitter.com/the_uhooi/status/1465571548463464451
• 1. Flutter 環境構築 · FlutterKaigi/atomic_design_handson Wiki
• flutter doctorで「Unable to find bundled Java version.」となる場合の解決法