flutterの環境構築してhandsonをiOS Simulatorで動かしてみる

flutterでiOSアプリが作りたかったので、他の方の入門記事を参考に環境構築しました。
handsonというアプリケーションをiOSのSimulatorで動かすところまでをやります。
行き詰まった箇所もあったので、flutterの環境構築で詰まった方の参考になればいいなと思います！

# 環境
- M1 Mac
- macOS: Sonoma 14.5
- Java8を過去にインストールした
- XCodeをAppStoreから過去にインストールしていたが重かったのでアンインストールした
- 今日: 2024年5月27日 (versionとかの参考にしてください)

# flutter SDK のインストール
このサイトからインストールしていきます。

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

自分の環境にあった環境を選んでください。
私はmacOSを選びました。

![スクリーンショット 2024-05-27 1.00.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821596/29fbbb0a-c2b5-4b0a-bf89-5a45e41c7652.png)

"If you don't have a preference, choose iOS."と言っているのでiOSを選びました。

![スクリーンショット 2024-05-27 14.13.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821596/6d9ce467-db47-a6df-28db-4ee2212ade1d.png)

M1 MacはApple siliconを使っているので、言われた通りにRosetta 2なるものをインストールしました。

```
$ sudo softwareupdate --install-rosetta --agree-to-license
```

![スクリーンショット 2024-05-27 14.17.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821596/231c04af-78ab-497d-6fa2-91dfbf8941e5.png)

早速flutterをインストールしていきましょう。
- 例のごとくApple Siliconなので `flutter_macos_arm64_3.22.1-stable.zip` を直接自分のパソコンにダウンロードします
![スクリーンショット 2024-05-27 14.20.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821596/c632b5f6-fd72-cf76-9022-2148c0e3d6f7.png)

- `development` フォルダを作ります

```
$ mkdir ~/development
```

- さっきダウンロードしたzipファイルを `development`に展開します

```
$ unzip ~/Downloads/flutter_macos_3.22.1-stable.zip \
     -d ~/development/
```

- `.zshenv` にパスを追記してflutterコマンドのパスを通します

```
$ export PATH=$HOME/development/flutter/bin:$PATH
```

- flutterのversionが確認できたらflutterのインストールは完了

```
$ flutter --version
Flutter 3.4.0-17.2.pre • channel dev • https://github.com/flutter/flutter.git
Framework • revision d6260f127f (1 year, 8 months ago) • 2022-09-21 13:33:49
-0500
Engine • revision 3950c6140a
Tools • Dart 2.19.0 (build 2.19.0-146.2.beta) • DevTools 2.16.0
```
# XcodeとAndroid Studioをインストールする
## Xcode
XcodeはApp Storeからインストールしました

![スクリーンショット 2024-05-27 14.40.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821596/11da10b9-d277-f0f2-07e9-b08f31b487d3.png)

## Android Studio
Android Studioは下記のサイトからインストールしました。

https://developer.android.com/studio?hl=ja

![スクリーンショット 2024-05-27 15.09.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821596/35d2cbf6-5cf4-ae9d-5973-8cf8bc9b3446.png)

追加で、`Android SDK Command-line Tools`を使えるようにするための設定を行います。
Android Studioを開いてMac上部のリボンから、`Android Studio << Settings << Languages&Frameworks << Android SDK << SDK Tools` に移動します。
`Android SDK Command-line Tools`にはデフォルトではインストールされていないはずなので、チェックマークをつけてインストールします。

![スクリーンショット 2024-05-27 15.39.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821596/675d6df6-fba4-27ed-76cb-9a1f3f1c2a1c.png)

# flutterの開発環境を整える
まずはflutterを開発チャンネルに切り替えます。

```
$ flutter channel dev
$ flutter upgrade
```

次にflutterでMacのアプリを開発できるように設定を変更します。

```
$ flutter config --enable-macos-desktop
```

# 開発環境の確認
`flutter doctor`コマンドを実行して問題がなければ開発環境の構築はほぼ完了です。

https://docs.flutter.dev/reference/flutter-cli

ちなみに`-v`オプションで詳細を表示できます。XcodeやJavaなどのツールがインストールされていなければここで警告されます。

```
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, 3.4.0-17.2.pre, on macOS 14.5 23F79 darwin-arm, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.3)
[✓] VS Code (version 1.89.1)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!
```

# 行き詰まったところその1

私の環境では`flutter doctor`は成功せずエラーを吐きました。

```
Exception in thread "main" java.lang.UnsupportedClassVersionError: com/android/sdklib/tool/sdkmanager/SdkManagerCli has been compiled by a more recent version of the Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file versions up to 52.0
```
Javaのversionが異なりますね。私のパソコンにもともと入っていたのがJava8(52.0)であったのが原因でした。なのでJava11(61.0)を再インストールしました。

しかし、それでもまだ同じエラーを吐き出したので参照されているjavaコマンドの参照先を確認すると、

```
$ whereis java
java: /usr/bin/java
```

新しくインストールしたJavaは別の場所に置かれているので、この参照先は私の意図したものと違いました。`/Library/Java/JavaVirtualMachines/temurin-21.jdk/Contents/Home/man/man1/java.1`を参照して欲しかった。

他の方の記事を参考にシンボリックリンクを貼ることで解決しました。

```
$ sudo ln -s /Library/Java/JavaVirtualMachines/jdk-21.jdk/Contents/Home/bin/java /usr/bin/java
```

sudoを使っているにも関わらずこのコマンドを実行できないケースがあります。原因はMacのセキュリティであり、Mac自体の設定から使用しているエディタに対してフルディスクアクセスを付与してください。
(システム設定 << プライバシーとセキュリティ << フルディスクアクセス)

# 行き詰まったところその2

しかし今度は別のエラーが発生しました。

```
$ flutter doctor
[!] Android Studio (version 2022.1)

    ~ 省略 ~
    
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.
```

また適切なJavaのversionが認識されていないと。
調べてみると最新のAndroid Studioは`/Applications/Android\ Studio.app/Contents/jre/`を参照しようとするのですが、自分の環境を見てみると、

```
$ ls /Applications/Android\ Studio.app/Contents/
CodeResources	Resources	jbr		license
Info.plist	_CodeSignature	plugins MacOS
bin		lib
```

jbrしかないですね。他の方の記事を参考にjreというjbrのシンボリックリンクを作って解決しました。

```
$ cd /Applications/Android\ Studio.app/Contents
$ ln -s jbr jre
```

# handsonアプリケーションを動かす
適当なパスに移動してhandsonという既に用意されているflutterプロジェクトを作成します。

```
$ cd ~/<your-path>
$ flutter create handson
```

実行してみましょう

```
$ cd ~/<your-path>/handson
$ flutter run
Multiple devices found:
macOS (desktop) • macos  • darwin-arm64   • macOS 14.5 23F79 darwin-arm
Chrome (web)    • chrome • web-javascript • Google Chrome 125.0.6422.77
[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (To quit, press "q/Q"):
```

あれ？iOSがありませんね？
あ、Simulatorを起動しないといけないのか。

```
$ open -a simulator
```

Mac下部のアプリケーションにSimulatorが見えました。
もう一回flutterプロジェクトを起動してみます。
あれ、まだiOSが出ない...

# 行き詰まったところその3
Simulator自体は起動しているのにiOS Simulatorが使えなさそうなのはなんでだろう。
以前実行した`flutter doctor`の結果を見て気づいた方もいると思いますが、iOSのSimulatorがインストールされていません。

ちゃんと公式を読んでいないのがバレてしまいました。

![スクリーンショット 2024-05-28 8.41.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821596/e1894c5c-b154-7270-935a-e94458f522fe.png)

iOSのSimulatorはまた別でダウンロードする必要があります。

```
$ xcodebuild -downloadPlatform iOS
```

またXcode上からもiOSのSimulatorはインストールできます。
Xcodeの設定から`Settings >> Platforms`でiOSのSimulatorをインストールします。
(7.34GBもある...)

![スクリーンショット 2024-05-28 8.43.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821596/92e9dd26-6fbf-187b-a39d-cbd3f8757101.png)

# iOSのSimulatorでhandsonを動かす
無事にiOS Simulatorもインストールできたのでもう一度Simulatorを起動します。

```
$ open -a simulator
```

デスクトップ上にiPhoneらしきものが出てきました。成功していそうです。
handsonを起動しましょう

```
$ flutter run
```

![スクリーンショット 2024-05-28 8.48.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/821596/864d58fd-5b0b-fdeb-e8be-5d2fff3eac51.png)

成功ですね！インクリメントも動きました。

# まとめ
- 行き詰まったところ
    - 違うJavaのバージョンがインストールされていた
    - Android Studioから正しいJavaが参照されていなかった
    - iOS Simulatorをインストールし忘れていた

皆さんは公式ドキュメントをよく読んで開発してくださいね！

# 参考文献

https://qiita.com/shohei-y/items/bb675bd436f73cb61da5

https://qiita.com/y-matsumoto/items/74467e528c7b2c745b87

https://zenn.dev/sd7jp/articles/763c84e398c6c7