なぜこの記事を書いているか
以前、Flutter 2.5.x 環境をmacOS上に構築する(XcodeとFlutterの複数バージョン対応版)と題した記事を投稿したのですが、この記事では3.0.x環境でも同様の手順で構築できるのかを検証する意味も含めてトレースします。
環境(2022/08/17現在)
- MacBook Pro (Intel Mac)
- macOS Monterey (12.5)
- Flutter (3.0.5)
- Android Studio (Chipmunk | 2021.2.1 Patch 2)
- Xcode (13.4.1)
インストール
Homebrew
今回もHomebrew経由で色々なものをインストールします。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Google Chrome
やはりGoogle 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してくれます。
- Xcodes.appの画面上の人型アイコンをクリックし、Apple IDでログインする
- Xcodes.appを起動し、13.4.1(もしくはインストールしたいバージョン)のインストールボタンをクリックする
- インストールにしばらく時間がかかるので待つ
- 13.4.1(もしくはインストールしたいバージョン)の開くボタンの左のチェックボタンを入れる(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をインストールされる場合は適宜読み替えてください。
- JetBrains Toolboxを起動し、Android Studioの
Install
ボタンをクリックする - インストールが完了したらAndroid Studioを起動
- Setup Wizardの手順に沿って設定と追加コンポーネントをインストール
- Welcome to Android Studio画面で
Plugins
を選択 -
Flutter
プラグインとDart
プラグインをインストール - プラグインをインストールし終わったら、Android Studioを再起動
- メニューから
Preferences
を選択 - 検索窓にsdkと入力し、
Appearance & Behavior
>System Settings
>Android SDK
を開く -
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版である3.0.5をバージョン指定でインストールし、デフォルトに指定(global設定)しています。
brew tap leoafarias/fvm
brew install fvm
fvm install 3.0.5
fvm global 3.0.5
% fvm flutter --version
Flutter 3.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f1875d570e (5 weeks ago) • 2022-07-13 11:24:16 -0700
Engine • revision e85ea0e79c
Tools • Dart 2.17.6 • DevTools 2.12.2
Androidライセンス
表示されるライセンスを確認し、y
を入力してEnter
、これを繰り返します。
fvm flutter doctor --android-licenses
flutter doctor
flutter doctor
を実行し、インストールに問題がないか確認します。
fvm flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.5 21G72 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
• No issues found!
flutterとdartのコマンドエイリアスの設定(お好みで)
以下のようにエイリアスを設定する事で、fvm flutter
をf
、fvm dart
をd
として起動出来るようになります。
vi ~/.zshrc
alias f='fvm flutter'
alias d='fvm dart'
exec $SHELL -l
f --version # => "fvm flutter --version"と同義
f doctor # => "fvm flutter doctor"と同義
f pub get # => "fvm flutter pub get"と同義
f run # => "fvm flutter run"と同義
d --version # => "fvm dert --version"と同義
# ... 以下同様
この環境でiOSアプリがビルドできるか?
実は私の従来使っている環境でビルドができなくなってしまっているので、今回作った環境でビルドができるかを試してみます。
プロジェクトの作成
f create flutter_example
cd flutter_example
- 作成したflutter_exampleをAndroid Studioで開く
-
Project View
の表示をAndroid
からProject
に変更 -
ios
フォルダを右クリックし、Flutter
メニューからOpen iOS modules in Xcode
を選択 - Xcodeが開くので
Runner
の設定のSigning & Capabilities
でAdd Accounts
をクリック - Apple IDを追加し、
Download Manual Profiles
をクリック、ウィンドウを閉じる -
Team
を今追加したApple IDに設定する - iOS用にビルドする
f build ios
正しくビルドが通る事を確認しました。
最後に
ちゃんとビルドできてしまいました。そうすると、同じ手順で構築している私の従来の環境はなぜビルドできないのか???
謎が深まるばかり、再インストールしかないのか?!