MacOSX の環境にて iOS アプリを Flutter で開発する環境構築の話

本投稿は [テクノロジー検証 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/technology_validation) の 9日目として投稿しています。

https://qiita.com/advent-calendar/2022/technology_validation

今回は、前回紹介しました OSX 10.13 に対し、
開発環境のセットアップ 〜 iPhone のエミュレーション表示までのお話です。

> 前回：
[MacOSX の環境にて iOS アプリを Flutter で開発する前段階のお話](https://qiita.com/nk-nara/items/50b5e0740f6826913772)

https://qiita.com/nk-nara/items/50b5e0740f6826913772

---

# 今回の目標

以下の画面表示ができる状態までのセットアップです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986951/24df0ab7-6914-20c9-f157-57a15a54a604.png)

# 手順参考

以下を元に実施しています。
本投稿の説明不足については、最後に記載する参考文献もあわせてご覧ください。
> [Flutterの環境構築(Mac編)｜Flutter基礎入門 by Flutter大学](https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc)

https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc

# 対象アプリおよび採用バージョン

本件では Flutter の開発環境として、必要な描きアプリを各バージョンで用意しました。

```
* Flutter SDK ( ver 3.3.8-stable )
* Android Studio ( ver 2021.3.1 Path 1 )
* Xcode ( ver 10.1 )
```

:::note warn
バージョン補足

採用した Xcode のバージョンは、とても古いです。
ご想像がついているかもしれませんが OSX 10.3 で利用可能なバージョンの限界です。

目的が、公開して提供し続ける場合は
最新 OSX をインストール可能な端末が必要となりますね。
:::

# 手順目次

以下の流れで実施しました

1. Flutter SDK のインストール ( from [Flutter 公式サイト](https://flutter.dev/docs/get-started/install) )
1. 環境変数の設定 ( $PATH --> .bash_profile )
1. Android Studio のダウンロード (from [Android Studio 公式サイト](https://developer.android.com/studio) )
1. Android Studio のインストール
1. Flutter、Dart プラグインをインストール
1. Android Studio にて Android エミュレーション表示の確認
1. Xcode のダウンロード ( from [Apple Developer](https://developer.apple.com/download/applications/) )
1. Xcode のインストール
1. Android Studio にて iPhone エミュレーション表示の確認 ... **【完了】**

---

## Flutter SDK のインストール ( from [Flutter 公式サイト](https://flutter.dev/docs/get-started/install) )

[Flutter 公式サイト](https://flutter.dev/docs/get-started/install) よりダウンロードしてきます。

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

ここは、バージョン選定で Stable の最新を選んだくらいで気になることは特にありませんでした。

:::note info
OSX のバージョン依存で適用できないということも特にありません。
ありがたいですね。
:::

## 環境変数の設定 ( $PATH --> .bash_profile )
ダウンロードした Flutter をパス指定なしで実行できるようにしておく必要があります。
$PATH の宣言を、shell 起動時 (私の環境では bash に対し) 読まれるように記載しました。

こちらも手順通り設定し、新規ウィンドウにて which コマンドで所在がわかるのを確認できたので OK です。


## Android Studio のダウンロード (from [Android Studio 公式サイト](https://developer.android.com/studio) )

[Android Studio 公式サイト](https://developer.android.com/studio) より
[Mac with Intel chip] のものをダウンロードしました。

https://developer.android.com/studio

:::note info
OSX のバージョン依存で適用できないということも特にありません。
サクサクできますね。
:::

> **抜粋**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986951/55e3dfc4-1f10-8e90-70f5-f7bc0c5c03e7.png)

##  Android Studio のインストール

実行ファイルを起動し、指示通りすすめました。
特に注意点はなかったです。

## Flutter, Dart プラグインをインストール

Flutter と開発言語の Dart についてプラグインをインストールします。
多少表示される順番に変更はありましたが、参考手順ベースで進めれます。

プラグインのインストール後、
新規起動時に **[New Flutter Project]** が表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986951/abc6b6cb-2a5e-7836-e190-40bd441a87a3.png)


##  Android Studio にて Android エミュレーション表示の確認

AVD Manager は名称変更して、Device Manager になっています

:::note info
参考: https://halzoblog.com/error-bug-diary/20221001-2/
:::

Device に Pixel〜 が表示され、▶︎ をクリックします。
Emulator の項目に Pixel〜 が表示されたのち電源ボタンを実行します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986951/7a63681c-3c2d-b801-62ff-4f5847ed1fbe.png)

:::note warn
スペックにもよりますが、けっこう起動に時間かかります
:::

起動後、Google のアイコンが見える Andoroid のエミュレーションが表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986951/0c514cc6-67b6-e64e-5e75-c1a273f0d64a.png)

##  Xcode のダウンロード ( from [Apple Developer](https://developer.apple.com/download/applications/) )

Apple Store からダウンロードは...できません。

Xcode は適用できる OSX バージョンに制約があります。
そのため、Appstore からはダウンロード不可でした。

確認すると、App Develover よりダウンロードができます。
登録が必要ですが、アプリとして公開しなければ無料で利用できるようです。

https://developer.apple.com/download/applications/



:::note info
ダウンロード速度は低めでした。余裕を持って実施するのが良いです
:::


##  Xcode のインストール

今回は Xcode 10.1 (xip 形式) を解凍し、
アプリケーションフォルダにドラッグしてインストールします。



##  Android Studio にて iPhone エミュレーション表示の確認

ダウンロード後、Open iOS Simulator を選択します。
新規 Simulator アプリが起動し、そちらに iPhone がエミュレーションされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986951/12c70997-f9e7-3c8b-df96-c31a4c282a9f.png)

:::note info
それなりに重いです
:::

window はベゼル無効化するとシンプルになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986951/d0bf9d49-92a5-5a5d-dd38-7ce24bbd4e09.png)

エミュレーション上で iPhone の画面が表示されていれば完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986951/8beb7071-31b5-b1f2-f481-e9b0ac5412b2.png)

次回
---

Flutter の基礎的なことも開発環境触りながらできそうですが、
先日ブラックフライデーがあり、[メッシュWifi (Deco X50)](https://www.tp-link.com/jp/home-networking/deco/deco-x50/) を購入しました。

https://www.tp-link.com/jp/home-networking/deco/deco-x50/

せっかくなので使ってみた感想を挙げてみようと思います。

それでは、明日以降のほかメンバの投稿もお楽しみいただけますと幸いです。


参考
---

App Developer の情報 : https://www.y-hakopro.com/entry/2020/02/08/122258
対象サイト : https://developer.apple.com/download/applications/
旧バージョン リンクの情報 : https://qiita.com/TsukasaHasegawa/items/0d7d5c2cf3a2b8ce8993
リリースマトリックス : https://qiita.com/thinkalot/items/1dfdba642906c1bf1fd2
旧バージョンのリンク : https://developer.apple.com/download/all/?q=%22Xcode%2010.1%22
xip インストール : https://fukatsu.tech/install-xcode