概要
知り合い「Flutterはいいぞ」
ぼく「はい」
Flutterのインストールから実機での動作確認がゴール。
環境
| Version | |
|---|---|
| macOS | Mojave 10.14.6 |
| Flutter | v1.7.8+hotfix.4-stable |
| VSCode | 1.38.0 |
| 実機端末 | iPhoneX 12.4 |
セットアップ
Flutter SDKのインストール
ダウンロード
ダウンロードしたzipを任意の場所に展開する。
PATHの設定
.bash_profileを修正してPATHを通す。
vim ~/.bash_profile
先ほどzipを展開したフォルダにPATHを通す。
+ export PATH="$PATH:$HOME/develop/flutter/bin"
PATHの読み込み。
source ~/.bash_profile
SDKのアップグレード
flutter upgrade
Visual Studio Codeの設定
拡張機能のインストール
FlutterとDartの拡張機能をインストールする。
プロジェクトの作成
Command + Shift + Pでコマンドパレットを開いてFlutter: New Projectを選択。
プロジェクト名と保存先を聞かれるので任意の値を入力。
iPhone実機に接続できるようにする
現状の確認
flutter doctor
iOSのところになんか色々出てる。
USBでiPhone繋いでるのにConnected deviceはNo devicesになってしまう。
[✗] iOS tools - develop for iOS devices
✗ 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
✗ ios-deploy not installed. To install:
brew install ios-deploy
[!] Android Studio (not installed)
[✓] VS Code (version 1.37.1)
[!] Connected device
! No devices available
対応
とりあえず示されたhomebrewのコマンドを順に実行してみる。
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
再確認。
flutter doctor
iOS toolsがOKになった。
Connected deviceもavailableになっている！
[✓] iOS tools - develop for iOS devices
[!] Android Studio (not installed)
[✓] VS Code (version 1.37.1)
[✓] Connected device (1 available)
VSCodeでデバイスが認識されるか確認。
Command + Shift + Pでコマンドパレットを開いてFlutter: Select Deviceを選択。
接続しているiPhoneが表示されていればOK!
ここまで
ためしにlib/main.dartを開いた状態でVSCodeのデバッグ > デバッグの開始でアプリを立ち上げようとしてみると...
aunching lib/main.dart on tocomi-iPhoneX in debug mode...
════════════════════════════════════════════════════════════════════════════════
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
════════════════════════════════════════════════════════════════════════════════
No development certificates available to code sign app for device deployment
Exited (sigterm)
なんかAppleIDのサインインとかしないといけないっぽい。
iPhone実機でアプリを動かせるようにする
こちらもメッセージのとおりに愚直に進めてみる。
対応
1- Open the Flutter project's Xcode target with
open ios/Runner.xcworkspace
作成したプロジェクトのルートディレクトリでopen ios/Runner.xcworkspace
XCodeが開いた。XCodeがなかったら事前にインストールする必要あり。
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
GeneralタブでDevelopment Teamが選択されていること。
Signing > Team > Add AccountからAppleアカウント追加してみる。
アカウントは追加できて新しいエラー
Failed to create provisioning profile.
The app ID "com.example.sample" cannot be registered to your development team. Change your bundle identifier to a unique string to try again.
IDがデフォルトだからかぶってた。適当な名前に変える。
Try againボタン押したらエラーが消えてなんかうまくいった感じ。
4- Build or run your project again
VSCodeよりワンモアデバッグ > デバッグの開始
アプリは配置された。でも開こうとすると信頼されていないデベロッパと表示されて開けない。
5- Trust your newly created Development Certificate on your iOS device
via Settings > General > Device Management > [your new certificate] > Trust
最後にiPhone側の設定。なんだけど日本語の一般設定だとDevice Managementにあたる項目が見当たらない。ググったらプロファイルとデバイス管理だった。ちゃんとデバイス管理って入ってるじゃん自分。。
設定後アプリを起動したら、無事サンプルアプリが起動！
おわりに
これで実機で動作確認しながらアプリを開発することができるようになった！
ホットリロードがマジ便利すぎて神ってる。