MacBook Pro がアプデで起動しなくなって新しいのと取り替えたので、ほぼまっさらな MacBook Pro (10.13.4)
で Flutter 開発環境を作り直したので記録に。普段 Mac で開発していないエンジニア向けです。
Android Studio と Xcode をインストール
既にインストールされてなければインストール。これはそのままなので特に問題ないはず。
Android Studio に Flutter プラグインをインストール
これも既にインストールされていなければ。起動時のウェルカム画面の Configure から Plugins を選択するか、設定からプラグインの画面を開きます。Flutter で検索してインストールします。
Flutter のインストール
https://flutter.io/get-started/install/
適当な場所に展開します。flutter/bin への PATH は通しても通さなくてもよいです。
flutter doctor の実行
展開したフォルダ内にある bin/flutter が実行できるところで、以下のコマンドを実行します。
flutter doctor
環境によって大きく変わりますが、だいたい以下のようなメッセージが表示されるので [!] が付いている項目の対応が必要です。１つ対応すると１つ２つと逆に増えたりもするので順に対応して行きます。
jasper: zelda$ ./flutter doctor
Building flutter tool...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.0)
✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices
✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
✗ Brew not installed; use this to install tools for iOS device development.
Download brew at https://brew.sh/.
[✓] Android Studio
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
! No devices available
! Doctor found issues in 3 categories.
以下の Python module "six" がないと出た人は、 doctor の指示通りだとどちらもうまくいかなかったので対処法を示します。
Missing Xcode dependency: Python module "six".
Install via 'pip install six' or 'sudo easy_install six'.
次のコマンドで Python を再インストールします。
brew reinstall python@2
インストールが完了したら、以下のコマンドで six をインストールします。
python -m pip install six
すべて対応すると以下のようになります。
jasper: zelda$ ./flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.0)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4)
[✓] Android Studio (version 3.1)
[✓] Connected devices (1 available)
※最後にデバイスをXcodeとペアリングしろと出るときは、デバイス側にこのコンピュータを信頼すると云うメッセージがでるので、信頼するにしてから flutter doctor を再実行します。
iOS実機でサンプルアプリを動かす
Android Studio で Flutter のプロジェクトを作ります（初回だけ Flutter SDK のパスの指定が必要です）。
※シミュレータで動かすだけなら、Android Studio の実行ボタンの左側にある Flutter Device Selection のドロップダウンで Open in iOS Simulator でシミュレータを起動し、実機を外して実行します。
実機で動かすには signing certificate の設定が必要です。何もせずにプロジェクトを実行しようとすると以下のメッセージが出るので、順番に対処していきます。メッセージの下にもう少し細かく分けた手順を載せます。
═══════════════════════════════════════════════════════════════════════════════════
No valid code signing certificates were found
You can connect to your Apple Developer account by signing in with your Apple ID in Xcode
and create an iOS Development Certificate as well as a Provisioning Profile for your project by:
1- Open the Flutter project's Xcode target with
open ios/Runner.xcworkspace
2- Select the 'Runner' project in the navigator then the 'Runner' target
in the project settings
3- In the 'General' tab, make sure a 'Development Team' is selected. You may need to
- Log in with your Apple ID in Xcode first
- Ensure you have a valid unique Bundle ID
- Register your device with your Apple Developer Account
- Let Xcode automatically provision a profile for your app
4- Build or run your project again
5- Trust your newly created Development Certificate on your iOS device
via Settings > General > Device Management > [your new certificate] > Trust
For more information, please visit:
https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/MaintainingCertificates/MaintainingCertificates.html
Or run on an iOS simulator without code signing
═══════════════════════════════════════════════════════════════════════════════════
- ターミナルでプロジェクトのルートを開きます。そこで
open ios/Runner.xcworkspaceと入力すると Xcode が起動します（一度起動すると Xcode のウェルカム画面に出てくるようになります）。 - 左上の Runner を選択します。
- Identity > Bundle identifier をユニークなものに変えます。
- Signing > Team で開発用のアカウントを選択します。選択できるアカウントがない場合は新規に作成します（Preferences から Accounts を選択して、左下のプラスをクリックして Apple ID を追加します）。アカウントを選択すると自動でプロビジョニングが始まり、Provisioning Profile と Signing Certificate の部分が埋まります。
- Xcode の実行ボタンを押します。ここでキーチェーンのアクセスがどうのとダイアログがでるので Mac にログインする際のパスワードを与えます。 複数回聞かれるので、聞いてこなくなるまで都度「常に許可」にします。何度も同じダイアログが出ます。
- iPhone 側で「システム環境設定」から「一般」を選択「デバイス管理」に新しく 4. で Team に指定したアカウントが追加されているので「信頼」にします。
- Android Studio に戻ってからプロジェクトを実行します。これで実機上で起動するはずです。
※数日するとプロビジョニングファイルが期限切れと出ますが、Xcodeを起動すると再生成します（また、すぐ切れます）。
7月19日に渋谷ヒカリエで Flutter Meetup Tokyo #3 を開催します。ぜひご参加ください。