iOS アプリ開発用メモ： Mac上で中途半端になっていた Flutter の開発環境の構築の続き

## はじめに

自分が持っている Mac・Windows で、以下の記事にも書いている Flutterアプリの開発環境を作っていました。

それについて、以下の記事で扱っていたものは Androidアプリを Android Studio で開発するという内容で、iOSアプリを扱う準備は行っていませんでした。

- [Flutter・Androidアプリの開発環境を作った時のメモ（Mac） - Qiita](https://qiita.com/youtoy/items/434020813fc4dde00131)
- [Windows 11 の PowerShell で Chocolatey をインストールした際のメモ - Qiita](https://qiita.com/youtoy/items/ef213c7ee6d47f0e304b)
- [FVM で Windows上での Flutter の開発構築のメモ（＋ Androidアプリの開発環境も） - Qiita](https://qiita.com/youtoy/items/edca3e29ac3e39108579)
- [Flutter を使った Androidアプリ開発など：TensorFlow形式から変換した LiteRT（TensorFlow Lite）のモデルを使った際のメモ - Qiita](https://qiita.com/youtoy/items/83fca076e981d157cd5e)

それで今回、上記の準備（＋過去の別件の開発）で途中までは（意図せず）できあがっていた「iOS アプリ開発のための Flutter の開発環境の構築」が完了するまで進めてみました。

### 今回のゴール

今回のゴールは、Flutter プロジェクトを Xcode を使って実機ビルドすることです。

先に結果を掲載すると、最終的には以下のように iPhone で Flutterアプリを動作させることができました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/KXa_TUQ-GAU?si=1TCNQw6BfS2cDYaX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## スタート時点の確認
まずはスタート時点の確認です。

Flutter用の環境は fvm を使って作っていため、以下のコマンドで現状を確認しました（※ エイリアスなど作ってないので、fvm をつけて flutterコマンドを実行する形です）。

```zsh
fvm flutter doctor
```

![Flutter2025-02-17_18-02-39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0dea629d-e06d-4dba-9ff5-1eabc1ce3ad9.jpeg)

準備関連では、古いバージョンが入っている CocoaPods を新しくすれば良さそうな状況でした。
（セットアップを全く行ってない状態だと、[公式のドキュメントにあるような手順](https://docs.flutter.dev/get-started/install/macos/mobile-ios)をあれこれ進める必要があるところでしたが）

### スタート時点までで行っていたこと
上記で `fvm flutter doctor` を実行した結果、 CocoaPods を新しくするだけとなっていた背景を軽く補足します。

#### Flutter関連のセットアップ
まず Flutterまわりは、上記の Android Studio での開発が行える状態になっていたので、SDK は導入済みとなっていました。

#### Xcode関連のセットアップ
また Xcode関連は、自分が持っている iPhone で実機ビルドをしてアプリを動かしていた状況だったため、セットアップ済みとなっています（※ その関連で iPhone側の開発者モード設定なども対応済みになっています）。

#### CocoaPods のインストール
CocoaPods の古いバージョンが入っていたのは、確かかなり前に以下のお試しをした際に利用したものだと思われます（← [当時の TensorFlow Lite、現LiteRT](https://ai.google.dev/edge/litert?hl=ja) を使うために使った覚えが）。

https://x.com/youtoy/status/1374405870700826624

:::note warn
上記の状態でのスタートになるため、クリーンな環境でのセットアップ手順と比較すると、以下の手順は本来のものより実施すべき内容がかなり少ないものとなります
:::


## 環境を作っていく
それでは環境構築を進めていきます。

### CocoaPods を新しくする

まずは CocoaPods を新しくします。

当時は gem を使って導入した覚えがあるのですが、Homebrew で導入すると個人的には管理しやすい状況です。

●cocoapods — Homebrew Formulae
　https://formulae.brew.sh/formula/cocoapods

そのため、古いバージョンを消して上記での再導入をします。

#### 古いバージョンの削除と新しいバージョンのインストール
まずは、以下のコマンドで古い CocoaPods を削除しました。

```zsh
sudo gem uninstall cocoapods
```

![2025-02-17_18-07-04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1927d040-5fb6-4f7f-acd1-c48644631702.jpeg)

そして、Homebrew で CocoaPods をインストールします。

```zsh
brew install cocoapods
```

少しエラーがでたりしましたが、エラーとともに提示された解決方法（具体的なコマンド）を実行して、事なきを得ました。

#### 状況の再確認

`fvm flutter doctor` で、再度状況を確認してみたところ、以下のように下準備が整った状態になりました。

https://x.com/youtoy/status/1891498801019425061


## プロジェクトの作成やアプリのビルドなど

それでは、プロジェクトの作成やアプリのビルドなどを行っていきます。

### 公式の情報で手順を確認
公式ドキュメントの以下などを見て、プロジェクトの作成方法などを確認します。

●iOS | Flutter
 https://docs.flutter.dev/deployment/ios

### 実際に進めていく

ここから、プロジェクト作成などを実際に進めていきます。

#### プロジェクトの作成
自分の試している環境では、 `~/XcodeProjects` が Xcode のプロジェクトの保存先になっていました。

その中で以下を実行して、プロジェクトを作成します。

```zsh
fvm flutter create --platforms=ios 【プロジェクト名】
```

これで【プロジェクト名】で指定した名称のフォルダができるので、その中へ移動します。

#### 補足：プラットフォームの指定について

上記のコマンドについて、当初は `fvm flutter create 【プロジェクト名】` としていたのですが、複数のプラットフォーム用の準備がされたようだったので、iOS用のもののみとなるような指定方法を調べて上記としました。

#### Xcode でのビルド

その後、以下を実行して Xcode でプロジェクトを開きます。

```zsh
open ios/Runner.xcworkspace
```

Xcode を開いてからは、サンプルプロジェクトをそのままビルドしました。
（記事の最初のほうに書いていたとおり、Xcode を使った実機ビルドはできる状態だったので、その設定をそのまま使った形です）

これで無事、冒頭に動画を掲載していたように Xcode でビルドした Flutterアプリを iPhone上で動かすことができました。


https://x.com/youtoy/status/1891508243106607583


## この後に試したいこと

どうやら今回のゴールの状態だとホットリロードが適用できない状態っぽいので、次は以下などを見つつそのあたりを試したいです。

●Hot reload | Flutter
　https://docs.flutter.dev/tools/hot-reload
●Set up an editor | Flutter
　https://docs.flutter.dev/get-started/editor

●FlutterのHot reloadで変更が反映されない時に確認すべき2つのこと【VSCode版】
　https://zenn.dev/masarufuruya/articles/flutter-hot-reload-act