FlutterでiOSアプリを作成してストアで公開する手順

FlutterでiOSアプリを作成し、App Storeで実際に公開するまでの手順を作業ログとしてまとめました。 開発中につまづいた点や、発生したエラーの解決方法についてもメモしています。
 
記事内に商品プロモーションを含む場合があります

アプリ開発・公開手順

以降では、アプリを開発してストアで公開するまでの主おな手順を紹介します。

開発環境の構築

開発に必要なツールのインストール

  • flutterコマンド 公式サイトからFlutter SDKをインストールします。
  • Xcode MacにXcodeをインストールします。 XcodeはiOSアプリを開発するために必要なツールで、Mac App Storeからインストールできます。
  • (VSCode & Flutterプラグイン) エディタはお好きなものを使用できますが、私はVSCodeを利用しています。 VSCodeのプラグインに「flutter」があるので合わせてインストールします。

Apple Developer Programへの登録

作成したアプリをストアで公開するためにはApple Developer Programへ登録する必要があります。 年間で99ドルの登録費を支払う必要があり…けっこうお高めです。

Bundle ID・証明書の設定

Bundle IDとは、各アプリ固有の識別子で、App Storeでのアプリ識別に使用されます。
Bundle IDの設定は以下の通りです。
  • Flutterプロジェクト内のファイル「ios/Runner.xcodeproj」を開き、 へ遷移し、「Bundle Identifier」に任意のIDを記入します。
  • 「Automarically manage sining」にチェックし、自動署名設定を有効にします。
 
自動署名を利用しない場合はProvisioning Profileを設定することとなります。
Provisioning Profileの登録手順
  • Flutterプロジェクト内のファイル「ios/Runner.xcodeproj」を開き、 へ遷移し、「Bundle Identifier」に任意のIDを記入します。
  • Apple DeveloperサイトのCertificates, Identifiers & ProfilesよりProvisioning Profileを登録します。以下の項目を設定してください。
    • Distribution: Ad Hoc
    • app ID: Runner.xcodeprojの「Setting & Capabilities」から指定できるBundle Identifier

検証用デバイスの登録

Apple Developerサイトのデバイスリスト から検証用デバイスを登録します。
登録時に必要なUDIDはXCODEの以下の個所から確認できます。

アプリ開発

プロジェクトの作成

VSCode上でプロジェクトを作成するには、「command + shift + P」でメニューから「Flutter: New Project」を選択します。
テンプレートは「Application」を選択し、プロジェクトを保存するフォルダを選択後、プロジェクト名を入力すると雛形のプロジェクトが作成されます。
 
ターミナルから直接プロジェクトを作成するには、以下のflutterコマンドを実行します。

プログラムの実行

以下のflutterコマンドを使ってアプリを起動します。

プログラムの開発

Flutterのパッケージはhttps://pub.dev/から検索できます。
例えば「shared_preference」(v2.3.1)パッケージを利用したい場合、pubspec.yamlの「dependencies」に「shared_preferences: ^2.3.1」を追加します。
ターミナルで以下のコマンドを実行することでも同様の記述を加えることが可能です。
 
ターミナルで以下のコマンドを実行し、上記でpubspec.yamlに追加したパッケージをダウンロードします。
 
実際にパッケージを利用するファイルにて、インポート文を記述して利用します。

Appストア公開用情報の登録

App Store Connectにログインし、新しいアプリを作成します。
個人でアプリを公開する場合は、開発者名としてローマ字表記の実名を公開しなければならないのでご注意ください。
参考:

アプリアイコンの作成

様々な機種に合わせて複数サイズのアイコンを登録する必要がありますが、以下に記載の手順で一括作成できるので、のアイコンのみ用意すればOKです。
 
以降はiOS用とAndroid用のアプリアイコンとして一括生成(変換)する手順です。
まず、pubspec.yaml に  を追加します。
pubspec.yaml の「image_path」に指定したパスに用意したアイコンを置きます。
以下のコマンドを実行することで、必要が画像が一括作成されます。
作成された画像はから確認できます。
 

スクリーンショットの登録

Appストアのアプリ説明画像を登録する必要があります。
の3種類の画像セットを用意します。

エラー対応ログ

iOSシミュレータが突然起動しなくなった → CoreSimulatorにあるキャッシュの削除で解決

事象

アプリ開発に利用していたiOSシミュレータが突然起動しなくなる事象が発生しました。 この事象が発生する前に「メモリが足りなくなりました。」のようなエラーでアプリが強制終了することがあったため、起動したプログラムが原因かと思われます。

解決方法

以下のディレクトリ配下のファイルを全て削除することでシミュレータが起動するようになりました。
「ライブラリ」フォルダは隠しフォルダのため、デフォルト設定ではFinderに表示されていません。表示するには「command」+「shift」+「.」 を押してください。
 
実機テストでProvisioning profileのエラー → Apple Developperで実機登録で解決
以下のエラーが発生する場合は、Apple Developperにて、既存のProvisioning Profilesに本実機のUDIDを紐付ける。
エラー「Using the Impeller rendering backend」→ info.plist編集で解決
以下のエラーが発生。
ios/Runner/info.plistに以下のコードを追加することで解決。
エラー「requires a higher minimum iOS deployment version」→ Podfile編集で解決
iOS機器でアプリ実行(Run> Start Debugging)すると以下のエラーが発生した。
に以下のコードを追加することで解決。

参考リンク

https://docs.flutter.dev/Flutter公式サイト
https://flutter.github.io/samples/#Flutter公式のサンプルソースコード集
Flutter実践開発分かりやすかったFlutter参考書籍
https://flutter.ctrnost.com/日本語によるFlutterの解説まとめサイト