【Flutter】スプラッシュ画面を表示させる

はじめに

パッケージ「flutter_native_splash」を使用してスプラッシュ画面を作成します。

スプラッシュ画面追加

flutter_native_splashを追加

以下のコマンドでflutter_native_splashをプロジェクトに追加します。

flutter pub add flutter_native_splash

スプラッシュ画面用の画像配置

以下の場所にスプラッシュ画面の真ん中に表示させたい画像を置きます。

※ 一旦1000×1000pxのスプラッシュ用の画像ファイルを作成
※ファイル場所は任意

/assets/images/splash/splash.png

スプラッシュ画面の設定

プロジェクト直下に flutter_native_splash.yaml を作成します。(pubspec.yamlと同様の階層)
その中に以下のようにスプラッシュ画面の設定を書きます。

※ 詳細な設定項目はpub.devのパッケージ説明参照
※ android_12の設定がないとandroid12以降で反映されない

# スプラッシュ画面設定
flutter_native_splash:
    color: "#ffffff" # スプラッシュ画面の背景色
    image: assets/images/splash/splash.png # スプラッシュ画面に表示する画像
    fullscreen: true # スプラッシュ画面をフルスクリーンにするかどうか
    android_12:
        image: assets/images/splash/splash.png # Android 12以降のスプラッシュ画面に表示する画像
        color: "#ffffff" # Android 12以降のスプラッシュ画面の背景色

スプラッシュ画面生成コマンド実行

以下のコマンドを実行してスプラッシュ画面を作成します。

flutter pub run flutter_native_splash:create

スプラッシュ表示中の初期化処理

スプラッシュ表示中に初期化処理をしたい場合は以下のコードを使用します。

void main() {
  // 以下のコードでスプラッシュ画面の削除のタイミングを制御できる
  // 初期化処理などを行ったあとにremove()を呼ぶ
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  FlutterNativeSplash.remove();
  runApp(const MyApp());
}

アプリ起動

flutter run などでアプリ起動時に以下のエラーが発生しました。

Your project is configured with Android NDK 26.3.11579264, but the following plugin(s) depend on a different Android NDK version:
- flutter_native_splash requires Android NDK 27.0.12077973
Fix this issue by using the highest Android NDK version (they are backward compatible).
Add the following to ~/qiita_memo/android/app/build.gradle.kts:

    android {
        ndkVersion = "27.0.12077973"
        ...
    }

NDKのバージョンを指定する必要がありそうでした。
NDKを確認してみたところ、 27.0.12077973 がなく29.0.13113456 が入っていたため、 29.0.13113456 をndkVersionに指定しました。

再度アプリを起動させると、指定した画像が表示されたスプラッシュ画面が表示されました。

まとめ

今回はFlutterのスプラッシュ画面の実装を行いました。
パッケージを使用することで簡単に実装することができました。