今回は、flutterで作成したスマホアプリにスプラッシュ画面を追加したいと思います。
スプラッシュ画面とは？
スプラッシュ画面とは、アプリを起動した直後に最初に画面中央に表示されるページのことです。Flutterアプリの起動は起動時にFlutterモジュールの読み込みと起動を実施するため少し間があります。その待ち時間に表示するアプリロゴなどの画面のことをスプラッシュ画面と言います。
アプリロゴなどのアプリに関する画像を表示した方が利用者にも親しみを持ってもらいやすいと思ったのでスプラッシュ画面を実装してみることにしました。
注意
- 画像について
- アプリ背景とスプラッシュ画面の境界がはっきりわかってしまうと見栄えが良くないので、背景色が透明の画像をスプラッシュ画像とすることをお勧めします。
- スプラッシュ画面では用意した画像の中央が円形にカットされた状態で表示されます。
768px × 768pxの画像の中央に表示したい画像を収めることをお勧めします。- Android12の場合は
1152px × 1152pxの画像の中央部分が半径768pxの円形に切り取られ表示されるようです。（機種を判別したうえで表示する画像を使い分ける必要があります。）
- Android12の場合は
使用するパッケージ
- 以下のパッケージを使用します。
- 上記リンクの
Readmeには細かい使い方の注意が記載されています。
手順
手順１：画像の用意
- 今回は
いらすとやさんの以下の画像を利用させていただくことにしました。
- 次に画像サイズを調整します。
768px × 768pxと1152px × 1152px（Android12用）の二つの画像を用意します。- どちらの画像も画像中央を中心にした半径
768pxの円形からイメージがはみ出ないようにする必要があります。 - 背景色が透明な画像の方がアプリ背景となじみやすいです。
- ダウンロードした画像は背景は透明ですが、サイズが合わないので調整した画像を作成します。
手順２：画像をプロジェクトに配置する
- 画像格納用のディレクトリを作成します。
私はプロジェクトルートに
\assets\imagesというフォルダを作成し以下の名前で画像を配置しました。(プロジェクトフォルダ)/ └ assets └ images ├ splash_768x768.png └ splash_1152x1152.png
手順３：スプラッシュ画面追加用のパッケージを追加
スプラッシュ画面追加のためのパッケージをインストールします。
私はfvmを導入しているので以下のコマンドでパッケージを追加しました。
fvm flutter pub add flutter_native_splash
コマンド実行結果
(省略)\training_app> fvm flutter pub add flutter_native_splash Resolving dependencies... + ansicolor 2.0.2 + archive 3.4.10 + args 2.4.2 + convert 3.1.1 + crypto 3.0.3 + csslib 1.0.0 flutter_lints 2.0.3 (3.0.1 available) + flutter_native_splash 2.3.9 + html 0.15.4 + image 4.1.3 + js 0.6.7 lints 2.1.1 (3.0.0 available) matcher 0.12.16 (0.12.16+1 available) material_color_utilities 0.5.0 (0.8.0 available) meta 1.10.0 (1.11.0 available) path 1.8.3 (1.9.0 available) + petitparser 6.0.2 + pointycastle 3.7.3 test_api 0.6.1 (0.7.0 available) + typed_data 1.3.2 + universal_io 2.2.2 web 0.3.0 (0.4.0 available) + xml 6.5.0 + yaml 3.1.2 Changed 16 dependencies! 8 packages have newer versions incompatible with dependency constraints. Try `flutter pub outdated` for more information.
手順４：pubspec.yamlの編集
pubspec.yamlの末尾に以下の例に習って設定を追記してください。flutter_native_splash:の部分はインデントは0で良いです。flutter_native_splash: image: 'assets/images/splash_768x768.png' color: '#ffffa8' image_dark: 'assets/images/splash_768x768.png' color_dark: '#262626' fullscreen: true android_12: image: 'assets/images/splash_1152x1152.png' icon_background_color: '#ffffa8' image_dark: 'assets/images/splash_1152x1152.png' icon_background_color_dark: '#262626'
色を入力する欄は皆さんの好みで良いですので気に入る配色になるまでいろいろと試してみてください。
手順５：スプラッシュ生成コマンドの実施
次のコマンドを実行します。
fvm flutter pub run flutter_native_splash:create
コマンド実行結果
(省略)\training_app> fvm flutter pub run flutter_native_splash:create [Android] Creating default splash images [Android] Creating dark mode splash images [Android] Creating default android12splash images [Android] Creating dark mode android12splash images [Android] Updating launch background(s) with splash image path... [Android] - android/app/src/main/res/drawable/launch_background.xml [Android] - android/app/src/main/res/drawable-night/launch_background.xml [Android] - android/app/src/main/res/drawable-v21/launch_background.xml [Android] - android/app/src/main/res/drawable-night-v21/launch_background.xml [Android] Updating styles... [Android] - android/app/src/main/res/values-v31/styles.xml [Android] No android/app/src/main/res/values-v31/styles.xml found in your Android project [Android] Creating android/app/src/main/res/values-v31/styles.xml and adding it to your Android project [Android] - android/app/src/main/res/values-night-v31/styles.xml [Android] No android/app/src/main/res/values-night-v31/styles.xml found in your Android project [Android] Creating android/app/src/main/res/values-night-v31/styles.xml and adding it to your Android project [Android] - android/app/src/main/res/values/styles.xml [Android] - android/app/src/main/res/values-night/styles.xml [iOS] Creating images [iOS] Creating dark mode images [iOS] Updating ios/Runner/Info.plist for status bar hidden/visible [Web] Creating images [Web] Creating images [Web] Creating background images [Web] Creating CSS [Web] Updating index.html ✅ Native splash complete. Now go finish building something awesome! 💪 You rock! 🤘🤩 Like the package? Please give it a 👍 here: https://pub.dev/packages/flutter_native_splash
手順６：確認
- VM等でアプリを起動してみると最初にスプラッシュ画面が表示されるようになっているはずです。
- 私はスプラッシュ実装後の初回動作確認時のみ、想定通り表示されませんでしたが2回目以降は表示されました。
- 初回動作確認時はビルド等の前処理が長かったので,表示タイミングが無かったのかもしれません。
これでスプラッシュ画面の実装は終わりです。
