スプラッシュ画像の設定
アプリアイコンを設定したら、続いてスプラッシュ画像の設定です。ただし、アプリアイコンと同様、Androidの場合には、Android12からリファレンスのスプラッシュ画面を参照するとわかるように、自由な大きさの画像を表示できるわけではありません。そのため、アプリアイコンの作り方と同様の考え方で画像を作成する必要があります。
また、Android12以降用のスプラッシュ画像が設定されていない場合には、自動的にアプリアイコンが利用されるので、同じアイコンで問題なければあえてAndroid12以降に対応したスプラッシュ画像を設定する必要はありません。
iOSの場合は768px以上の透過PNGを用意してください。
flutter_native_splashのインストールと設定
スプラッシュ画像を設定するには、flutter_native_splashを利用すると簡単に設定が行えます。
インストールするにはプロジェクトフォルダ配下に入り、リスト10のようにコマンドを実行します。
$flutter pub add flutter_native_splash
なお、設定はpubspec.yamlに記述しても構いませんが、別ファイルの方が管理しやすいため、著者は「flutter_native_splash.yaml」というファイルを作っています。
例えば、iOSとAndroid11までのスプラッシュ画像を設定する場合には、リスト11のように、背景色（color）とスプラッシュ画像本体（image）の設定のみで問題ありません。ただし、web指定は作成時にワーニングが表示されるため意図的に無効にしています。
flutter_native_splash: color: "#FFFFFF" image: assets/images/splash.png web: false
また、Android12以降のスプラッシュ画像を設定する場合には、リスト12のように通常画像とダークモード時で別々の画像や背景を設定することも可能です。
flutter_native_splash:
color: "#FFFFFF"
image: assets/images/splash.png
android_12 :
image: assets/images/splash_android.png
icon_background_color: "#FFFFFF"
image_dark: assets/images/splash_android.png
icon_background_color_dark: "#121212"
web: false
設定が完了したら、リスト13のように「dart run flutter_native_splash:create」で各ネイティブプロジェクトに反映させます。
$dart run flutter_native_splash:create Building package executable... (省略) [Android] - android/app/src/main/res/drawable/launch_background.xml (省略) [iOS] Creating images [iOS] Updating ios/Runner/Info.plist for status bar hidden/visible (省略)
また、設定されていることを確認するためには、Androidであれば実行時に表示されているファイルを参照することで、iOSの場合にはアプリアイコンと同様にXCodeを開くことで確認できます。
最後に
今回は、スマホアプリでの共通する項目（アプリ名やスプラッシュ画像など）で、通常であればプラットフォームごとに異なる設定になってしまうものについて紹介しました。
アプリ配布用のリリースビルドは、開発者誰もが必ず行うものではなく、またFlutterというネイティブ非依存の言語だからこそ、余計に分からない、もしくは面倒だと感じる部分があります。
今回紹介した内容で設定だけは共通にできるものの、その制限やポリシーはどうしてもネイティブアプリ側に依存するため、まったくネイティブアプリ側の事情が分からなくても対応できるというものでもありません。
そして、リリースビルドをする際にはこれ以外にも、ネイティブプラットフォーム側に残ってしまう特有の設定や手順もあります。次回はそちらについて紹介したいと思います。
