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 のインストール

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

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

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

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

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

早速flutterをインストールしていきましょう。

• 例のごとくApple Siliconなので flutter_macos_arm64_3.22.1-stable.zip を直接自分のパソコンにダウンロードします
  

• 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からインストールしました

Android Studio

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

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

flutterの開発環境を整える

まずはflutterを開発チャンネルに切り替えます。

$ flutter channel dev
$ flutter upgrade

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

$ flutter config --enable-macos-desktop

開発環境の確認

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

ちなみに-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がインストールされていません。

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

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

$ xcodebuild -downloadPlatform iOS

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

iOSのSimulatorでhandsonを動かす

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

$ open -a simulator

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

$ flutter run

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

まとめ

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

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

参考文献