【Flutter】flutter_native_splashでスプラッシュ画面を作る

flutter_native_splashとは

flutter_native_splashは、Flutterアプリの起動時に表示されるスプラッシュ画面をカスタマイズするためのパッケージです。
ダークモード、フルスクリーン、プラットフォーム固有のオプションもサポートしています。

flutter_native_splash | Flutter package

Customize Flutter's default white native splash screen with background color and splash image. Supports dark mode, full ...

pub.dev

使い方

1. パッケージのインストール

pubspec.yamlファイルに以下の依存関係を追加します。

dependencies:
  flutter_native_splash: ^2.4.0

2. スプラッシュ画面の設定

プロジェクトのpubspec.yamlファイルに以下の設定を追加するか、プロジェクトルートにflutter_native_splash.yamlという新しいファイルを作成して設定を追加します。

flutter_native_splash:
  # 必須項目：スプラッシュ画面の背景色または背景画像を設定
  color: "#42a5f5" # 背景色
  # background_image: "assets/background.png" # 背景画像

  # オプション項目
  # スプラッシュ画面に表示する画像を指定
  image: assets/splash.png

  # ブランディング画像を指定
  # branding: assets/dart.png
  # branding_mode: bottom # 画像の位置を指定（bottom, bottomRight, bottomLeft）

  # ダークモード設定
  # color_dark: "#042a49"
  # background_image_dark: "assets/dark-background.png"
  # image_dark: assets/splash-invert.png
  # branding_dark: assets/dart_dark.png

  # Android 12+ の設定
  android_12:
    image: assets/android12splash.png
    color: "#42a5f5"
    # icon_background_color: "#111111"

  # プラットフォーム固有の設定
  # android: false
  # ios: false
  # web: false

設定を追加したら、ターミナルで以下のコマンドを実行してスプラッシュ画面を生成します。

dart run flutter_native_splash:create

設定を別ファイルに追加した場合は、以下のように--pathオプションを使用します。

dart run flutter_native_splash:create --path=path/to/my/file.yaml

3. アプリ初期化の設定（オプション）

アプリの初期化が完了するまでスプラッシュ画面を保持したい場合は、以下のようにpreserve()とremove()メソッドを使用します。

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

// 初期化が完了したら、スプラッシュ画面を削除
FlutterNativeSplash.remove();