FlutterでiOSアプリを開発する準備

アフィリエイト広告を利用しています

このページの内容が役に立ったら X (旧twitter) でフォローして頂けると励みになります
挨拶や報告は無しで大丈夫です

iOSアプリを開発するには mac が必要です。
mac が・・・というか XCode が必要です。なので mac が必要です。

ということで、Windows単体では開発することはできません。

本記事での環境

iMac (Retina 5K, 27-inch, Late 2015)
macOS Monterey

こちらにインストールしていきます。

公式のインストールマニュアル

https://flutter.dev/

ヘッダー内 右上「Get started」をクリック

「macOS」をクリック

ここにやり方が書かれていますのでこの通りやっていきます。

iOSアプリ開発向けのセットアップ

XCode をインストール

https://apps.apple.com/us/app/xcode/id497799835

普通にインストールすればOKです。

ターミナルから下記を実行

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

Xcode初回起動時はライセンス画面などが出るので、普通にXcodeを起動して確認しておきます。

CocoaPods の更新

flutter doctor

flutter doctor で次のようなメッセージが出ている場合は更新が必要です。

! CocoaPods 1.8.4 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

https://guides.cocoapods.org/using/getting-started.html#installation

こちらのとおり「gem install cocoapods」で更新するだけなのですが、別の問題が重なってきます。

手順については、下記を参考に「調査結果からの考察、対策を実行する」から行いました。
https://qiita.com/ryamate/items/e51c77fbabc2aec185fc

pod --version
sudo gem install cocoapods

上記リンク先の最後の手順と重なりますが、cocoapods のアップデートが成功すればOKです

pod --version
1.11.3

iOS シミュレータの準備

ターミナルから下記を実行して、シミュレータを起動

open -a Simulator

シミュレータが起動したら、File > Open Simulator でスマホバージョンの切り替えができます。

Window > Physical Size で「物理サイズ」

シンプルなFlutterアプリを作成して実行

ここで実際にFlutterアプリを作成して実行できるところまでを確認します。

# プロジェクトを作成するディレクトリに移動
cd ~takashi/app/aulta

# my_app というアプリを作る
flutter create my_app

# 作成されたディレクトリの中へ
cd my_app

# 実行する
flutter run

実行するデバイスを選択できます。

[1] USB接続しているアンドロイドスマホ

[2] シミュレータの iPhone 14

[3] シミュレータの iPhone 14 Pro Max

[4] macアプリのことかな?

[5] Webアプリということかな?

※シミュレータ本体は先に自分で起動しておく必要があります。(手順は上述)

ということで、2 を入力してみました。

しばらくするとシミュレータ内でアプリが起動しました。

右下の「+」をタップすると、中央の数字がカウントアップするアプリのようです。

終了するには、シミュレータ内からアプリを終了させます。
(画面下から上にスワイプしてポイ方式)

flutter doctor

最後に flutter doctor で確認しておきましょう。

flutter doctor

XCode が緑色に変わり、警告もなくなっています。