スプラッシュを使用する

公開日2023-08-14

更新日2023-08-14

flutter_native_splash を使うと、アプリ起動時に表示される画面を作成することができます。

スプラッシュ画像を用意する

まずは表示するスプラッシュスクリーンに表示する画像を用意しましょう。今回は、こちらの画像を使います。

次に、プロジェクト直下にassets/imagesを作り、その中に画像を追加します。以下に保存しておきます。

assets
└── images 
   └── sample.png

プラグインのインストール

プロジェクトフォルダ直下に位置する pubspec.yaml の dependencies ブロックの中に、

flutter_native_splash: ^2.3.1

を記述します。

もしくは、下記のコマンドをターミナルで実行します。

flutter pub add flutter_native_splash

^2.3.1 はプラグインのバージョンです。こちらに最新のバージョンが載っていますので確認してください。

スプラッシュスクリーンの設定

次にスプラッシュスクリーンの設定を、同じくpubspec.yamlに追記していきます。

flutter_native_splash:
  color: "#42a5f5"  # スプラッシュスクリーンの背景色を指定します。
  image: assets/splash.png  # スプラッシュスクリーンに使用する画像のパス（プロジェクト内の適切なパスを指定）
  android: true  # Android向けのスプラッシュスクリーンを有効にするかどうか
  ios: true  # iOS向けのスプラッシュスクリーンを有効にするかどうか
  fullscreen: true #スプラッシュスクリーンを画面全体にしたい時はtrueを指定します。

スプラッシュイメージ生成

flutter_native_splashパッケージのオプションを設定したら、次のコマンドを実行してスプラッシュイメージを生成します。

flutter pub get
flutter pub run flutter_native_splash:create

ターミナルに以下のように出力されたら成功です。

[Android] Creating default splash images
[Android] Creating dark mode splash 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]  - android/app/src/main/res/values-night-v31/styles.xml
[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
╔════════════════════════════════════════════════════════════════════════════╗
║                                 WHAT IS NEW:                               ║
╠════════════════════════════════════════════════════════════════════════════╣
║ You can now keep the splash screen up while your app initializes!          ║
║ No need for a secondary splash screen anymore. Just use the remove()       ║
║ method to remove the splash screen after your initialization is complete.  ║
║ Check the docs for more info.                                              ║
╚════════════════════════════════════════════════════════════════════════════╝

✅ 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

以下のようにスプラッシュ画面を実装することができます。

詳細変更

その他に背景画像からダークモード対応まで、様々な要素を設定できます。以下に各プロパティとその使用方法を詳しく解説します。

background_imag:背景画像を指定するためのプロパティ。
branding:アプリを制作した会社のロゴなどを表示させるためのプロパティ。 Android 12 以上のバージョン、 iOS, Web で使用可能。
branding_mode branding:で指定した画像の位置を変更するためのプロパティ。デフォルトは bottom で、bottomLeft, bottomRight が指定可能。
color_dark:ダークモードの時の背景色を指定するためのプロパティ。
background_image_dark:ダークモードの時の背景画像を指定するためのプロパティ。
image_dark:ダークモードの時の画像を指定するためのプロパティ。
branding_dark:ダークモードの時の画面下部の画像を指定するためのプロパティ。

まとめ

flutter_native_splashは、Flutterアプリのスタート画面を手軽にカスタマイズできる便利なツールです。アプリを開いたときに表示されるこの画面は、ユーザーに最初の印象を与える大切な部分です。ユーザーがアプリを開いた瞬間から雰囲気づくりが始まり、待ち時間中の不安を解消し、起動時の退屈さを軽減する役割を果たします。

待ち時間中の不安を解消するために、進行バーを追加することでユーザーが読み込みの進捗を視覚的に確認できるようにしましょう。これにより、待ち時間がどれくらいか分かるため、ユーザーの不安を軽減できます。

アプリの起動時間が長い場合、スプラッシュ画面にはアニメーションを取り入れることで、ユーザーが待ち時間を楽しく過ごせるように工夫することもできます。

参考リンク

flutter_native_splash Package