iPhone実機でFlutter開発を進めたい

# 概要

知り合い「Flutterはいいぞ」

ぼく「はい」

Flutterのインストールから実機での動作確認がゴール。

# 環境

||Version|
|---|---|
|macOS|Mojave 10.14.6|
|Flutter|v1.7.8+hotfix.4-stable|
|VSCode|1.38.0|
|実機端末|iPhoneX 12.4|

# セットアップ

## Flutter SDKのインストール

### ダウンロード

https://flutter.dev/docs/get-started/install/macos

ダウンロードしたzipを任意の場所に展開する。

### PATHの設定

.bash_profileを修正してPATHを通す。

```shell
vim ~/.bash_profile
```

先ほどzipを展開したフォルダにPATHを通す。

```diff
+ export PATH="$PATH:$HOME/develop/flutter/bin"
```

PATHの読み込み。

```shell
source ~/.bash_profile
```

### SDKのアップグレード

```shell
flutter upgrade
```

## Visual Studio Codeの設定

### 拡張機能のインストール

`Flutter`と`Dart`の拡張機能をインストールする。

### プロジェクトの作成

`Command + Shift + P`でコマンドパレットを開いて`Flutter: New Project`を選択。

プロジェクト名と保存先を聞かれるので任意の値を入力。

## iPhone実機に接続できるようにする

### 現状の確認

```shell
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のコマンドを順に実行してみる。

```shell
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
```

再確認。

```shell
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!

![select_device.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/69aa962c-e357-90a7-8dc0-a1b64d40fb0e.gif)

### ここまで

ためしに`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よりワンモア`デバッグ > デバッグの開始`

![install_app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/190770/b9216e2e-855b-f358-08a4-cc5eb5557ef8.png)

アプリは配置された。でも開こうとすると信頼されていないデベロッパと表示されて開けない。

```
  5- Trust your newly created Development Certificate on your iOS device
     via Settings > General > Device Management > [your new certificate] > Trust
```

最後にiPhone側の設定。なんだけど日本語の一般設定だと`Device Management`にあたる項目が見当たらない。ググったら`プロファイルとデバイス管理`だった。ちゃんと`デバイス管理`って入ってるじゃん自分。。

設定後アプリを起動したら、無事サンプルアプリが起動！

# おわりに

これで実機で動作確認しながらアプリを開発することができるようになった！

ホットリロードがマジ便利すぎて神ってる。