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

Flutter

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 ...

使い方

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();

Android 12以降ではスプラッシュ画面の設定が異なるため、特に注意が必要です。

Buy me a coffee!

Flutterアプリ開発
シェアする
sogaをフォローする
タイトルとURLをコピーしました