Flutter 2.5.x 環境をmacOS上に構築する（XcodeとFlutterの複数バージョン対応版）

なぜこの記事を書いているか？

自分の参画していたプロジェクトで、FlutterおよびXcodeのバージョンの違いに悩まされていたので、違いを吸収する方法は無いかと色々調べていたら以下の方法にたどり着きました。その備忘録です。

環境（2021/10/03現在）

• MacBook Pro (Intel Mac)
• macOS Big Sur (11.6)
• Flutter (2.5.2)
• Android Studio (Arctic Fox | 2020.3.1 Patch 2)
• Xcode (13.0)

インストール

Homebrew

今回は色々な物をHomebrewでインストールするので、以下を実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Google Chrome

なにはともあれ、Chrome。

brew install --cask google-chrome

Xcodes.app

Xcodeの様々なバージョンをインストールしたり管理するのにXcodes.appを使います。

brew install --cask xcodes

Xcode

先にも書いたとおり、Xcodes.appを利用してXcodeを管理します。複数バージョンを入れた場合は、インストールするとバージョン名がついた状態でApplicationフォルダに格納されます。通常であれば、それらをxcode-selectして利用するのですが、Xcodes.appはxcode-selectをコマンドラインで実行しなくても、バージョン毎のActive Versionのチェックを入れると、ActiveになったバージョンのXcodeに自動的にxcode-selectしてくれます。

1. Xcodes.appを起動し、13.0（もしくはインストールしたいバージョン）のINSTALLボタンをクリックする
2. インストールにしばらく時間がかかるので待つ
3. 13.0（もしくはインストールしたいバージョン）のOPENボタンの左のチェックボタンを入れる（xcode-selectしたのと同じ状態になります）

JetBrains Toolbox

私はJetBrainsのIntelliJ IDEA系のIDEを色々と使っているので、Android Studioをインストールするのも、JetBrains Toolboxから行います。Android Studioを個別にダウンロードしてインストールする場合は、この手順は必要ありません。

brew install --cask jetbrains-toolbox

Android Studio

JetBrains Toolboxでインストールする手順になっています。個別にダウンロードしてAndroid Studioをインストールされる場合は適宜読み替えてください。

1. JetBrains Toolboxを起動し、Android StudioのInstallボタンをクリックする
2. インストールが完了したらAndroid Studioを起動
3. Setup Wizardの手順に沿って設定と追加コンポーネントをインストール
4. Welcome to Android Studio画面でPluginsを選択
5. FlutterプラグインとDartプラグインをインストール（Flutterプラグインをインストールすると、自動的にDartもインストールする旨表示されインストールされる）
6. プラグインをインストールし終わったら、Android Studioを再起動
7. メニューからPreferencesを選択
8. 検索窓にsdkと入力し、Appearance & Behavior > System Settings > Android SDKを開く
9. SDK Toolsタブを開き、Android SDK Command-line Tools (latest)にチェックを入れ、Applyボタンを押し表示される手順に沿ってインストール

CocoaPods

CocoaPodsをインストールします。ユーザー領域にインストールする事ももちろん出来ますが、今回はsudoでシステム領域にインストールします。

sudo gem install cocoapods

FVM (Flutter Version Management)と、Flutterのインストール

HomebrewでFVMをインストールします。FVMを利用すると、Flutterのバージョンを細かく制御できます。詳細は本家サイト( https://fvm.app/ )をご覧ください。今回は現時点でstable版である2.5.2をバージョン指定でインストールし、デフォルトに指定（global設定）しています。

brew tap leoafarias/fvm
brew install fvm
fvm install 2.5.2
fvm global 2.5.2

実行例

$ fvm flutter --version
Flutter 2.5.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 3595343e20 (3 days ago) • 2021-09-30 12:58:18 -0700
Engine • revision 6ac856380f
Tools • Dart 2.14.3

Androidライセンス

表示されるライセンスを確認し、yを入力してEnter、これを繰り返す

fvm flutter doctor --android-licenses

flutter doctor

flutter doctorを実行しインストールに問題がないか確認する

fvm flutter doctor

output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.2, on macOS 11.6 20G165 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] Android Studio (version 2020.3)
[✓] Connected device (1 available)

• No issues found!

flutterとdartのコマンドエイリアスの設定（お好みで）

以下のようにエイリアスを設定する事で、fvm flutterをf、fvm dartをdとして起動出来るようになります

command

vi ~/.zshrc

~/.zshrc

alias f='fvm flutter'
alias d='fvm dart'

command

exec $SHELL -l

実行例）

command

f doctor # => "fvm flutter doctor"と同義
f pub get # => "fvm flutter pub get"と同義
f run # => "fvm flutter run"と同義
# ... 以下同様

最後に

Xcodes.appとfvmで環境のバージョン違いに対応出来、開発がスムーズに進められるようになりました。現時点でCocoaPodsのバージョンによる差が吸収出来ていないので、この辺りも調べて近々にアップデートしたいところです。