Flutterでのスプラッシュ画面（アプリ起動の際に数秒間表示される画面）実装方法についてまとめました！

環境情報

  • flutter: 3.19.2
  • プラグイン周り
    • sdk 設定 >=3.2.0 <4.0.0
    • flutter_native_splash: ^2.4.0

まず、スプラッシュ画面の実装方法は大きく2つあります。

  • Xcodeや~.xmlファイルに画像を手動で設定し、作成する方法。
  • プラグインを使用して作成する方法。

今回はプラグインを使用して作成する方法でスプラッシュ画面を作成したので、その手順や内容についてまとめます。

大まかな手順

  • スプラッシュ画像を用意
  • flutter_native_splashを追加＆設定
  • ターミナルでコマンドを実行

スプラッシュ画像を用意

iOSとAndroid11までは同じ画像でスプラッシュ画面の実装が可能です。
以下が画像の要件です。

  • 縦横サイズ768pxが都合が良い。
  • 円の中に画像を収めた方が見栄えが良い。
  • ファイル形式は png
  • 背景透過あり（無しでも実装は可能。あったほうが見栄えがいい。）

↓こんなイメージ

Android12以降からスプラッシュ画面の処理が変更しています。
変更後のスプラッシュスクリーン処理では、OS側で画面中央の円に自動的に切り取られるため、
余白に考慮した画像を用意する必要があります。
Android12の画像指定をしなかった場合、アプリのアイコン画像が代わりに表示されます。

  • 縦横サイズは 1152px
  • 直径 768px の円の中に画像を収める
  • ファイル形式は png
  • 背景透過あり

android_12:
# The image parameter sets the splash screen icon image.If this parameter is not specified,
# the app’s launcher icon will be used instead.
# Please note that the splash screen will be clipped to a circle on the center of the screen.
# App icon with an icon background: This should be 960×960 pixels, and fit within a circle# 640 pixels in diameter.
# App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle# 768 pixels in diameter.

引用サイト：https://pub.dev/packages/flutter_native_splash

↓Android12の画像指定をしなかった場合の画面

それぞれの画像が用意できたらアプリのassetsフォルダに格納します。
（本案件で使用した画像名と格納場所を参考に載せておきます。）

  • iOSとAndroid11までの画像：アプリ名/assets/image/splash_logo.png
  • Android12以降の画像：アプリ名/assets/image/splash_logo_android12.png

flutter_native_splashを追加＆設定

  • pubspec.yamlにflutter_native_splash を追加。 flutter pub get も忘れずに！
dependencies:
flutter_native_splash: ^2.4.0
  • flutter_native_splash の設定をカスタマイズしていきます。
flutter_native_splash:
color: "#9c7c6c"
image: assets/image/splash_logo.png
android_12:
icon_background_color: "#9c7c6c"
image: assets/image/splash_logo_android12.png
  • color：スプラッシュ画面の背景色
  • image：iOSとAndroid11までの起動時に使用される画像
  • android_12：
  • icon_background_color：スプラッシュ画面の背景色
  • image：Android12以降の起動時に使用される画像

今回の案件では実施していませんが、ダークモード時の画像や背景色の指定、iOSとAndroidごとの設定などアプリの仕様によって各種カスタマイズ可能です。

ターミナルでコマンドを実行

  • 最後に以下のコマンドを実行すれば、スプラッシュ画面を自動生成してくれます。
dart run flutter_native_splash:create --path=path/to/my/file.yaml

splash_movie

参考資料

コメント📝
OSによってスプラッシュ画面の生成方法が異なることを知った！
Flutter開発において、iOS、Androidどちらにも考慮しないといけない点は大変な面もしばしば。。。

その分、同時に学べてとてもいい機会になっている🤓