Flutter : Flavorごとに異なるSplash画面を表示する

入れるライブラリ

flutter_native_splash
https://pub.dev/packages/flutter_native_splash

参考

実装手順

1. ライブラリを入れる
   flutter pub add flutter_native_splash

2. flavorごとにyamlの設定ファイルを作成する
   例にあるproductionの部分を個別のflavorを入れる
   例：flutter_native_splash-production.yaml

3. flavorごとに設定を記載する
   Android12~のスプラッシュ画像の設定に関しては参考資料を確認してください。

flutter_native_splash-production.yaml

flutter_native_splash:
  ## 背景色
  color: "#ffffff"
  ## スプラッシュ画面の画像のパス
  image: assets/logo-production.png
  branding: assets/branding-production.png
  ## ダークモードの時の背景色
  color_dark: "#121212"
  ## ダークモードの時のスプラッシュ画像のパス
  image_dark: assets/logo-production.png
  branding_dark: assets/branding-production.png

  android_12:
    image: assets/logo-production.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-production.png
    icon_background_color_dark: "#121212"
  
  web: false

最後に flavorごとに下記のコマンドを叩く
flutter pub run flutter_native_splash:create --flavor production

Androidは以上で設定完了です

ここからはiOS側に関することです。

私が実装していて発生した事象

・{プロジェクトDir}/ios/Runnder.xcodeproj/project.pbxproj
のiOSのプロジェクトファイルに}ct */;という差分がでていた。
理由はわからないが、これが原因でXcodeでcannot open xcodeprojが発生していたため、差分を戻したら解消された

・生成されたproductionLaunchScreenに画像が表示されず、背景色もblackになっていた
→ とりあえず直接上記のファイルに個別の画像を指定し、背景色も個別で指定

iOS側設定操作（ライブラリのReadmeに載っています）

1. 生成されているflavorごとのLauncherScreenファイル（ここではproductionLauncherScreen）が、Runner配下に存在するためこれを
   Runner/Runner/配下に移動させる

2. 左のリストから一番上のRunnerを押下し、プロジェクトの設定画面を開き、表示される上部のタブからBuild Settingを選択

3. 2の下にさらにタブが表示されるため、その一番左にある + ボタンを押下する。

4. Add User-Defined Settingを選択し、LAUNCHER_SCREEN_STORYBOARDを入力する

5. BuildSchemeごとに使うflavorごとのLauncherScreenファイルを指定する（ここではproductionLauncherScreen）

6. 最後にRunner/Runner/Info.plistを開き、Launch screen interface file base nameというキーに対して
   $(LAUNCH_SCREEN_STORYBOARD)という値を渡す

これでiOS側の設定も完了