[Flutter] スプラッシュスクリーン

概要

Flutterを使ってアプリを開発してみようかと思います。今回のブログポストではFlutterでスプラッシュスクリーンを変更する方法について説明します。

スプラッシュスクリーンを変更するためにはアンドロイドとiOSに合わせてイメージを生成して、各プラットフォームに合わせてスプラッシュスクリーンを設定する必要があります。

Adding a splash screen to your mobile app

しかし、flutter_native_splashパッケージを使うと、スプラッシュスクリーンをもっと簡単に変更することができます。

flutter_native_splash

イメージファイル準備

公式ドキュメントにはイメージファイルに関して特に書いてありません。私は下記のようなイメージを使いました。

PNGファイル
3000px X 3000pxサイズ以上のイメージ

準備したファイルをassets/splash.pngに保存します。

flutter_native_splashインストール

flutter_native_splashパッケージを使うためにはflutter_native_splashパッケージをインストールする必要があります。次のコマンドを実行してflutter_native_splashパッケージをインストールします。

flutter pub add flutter_native_splash --dev

スプラッシュイメージ設定

次はスプラッシュスクリーンで使うイメージファイルを設定する必要があります。スプラッシュスクリーンを設定するためFlutterプロジェクトのフォルダ中に./flutter_native_splash.yamlファイルを生成して下記のように修正します。

...
flutter_native_splash:
  color: "#FFFFFF"
  image: assets/splash.png
  fullscreen: true

flutter_native_splashパッケージオプション

flutter_native_splashパッケージは色んなオプションを持っています。

color: スプラッシュスクリーンの背景の色
background_image: スプラッシュスクリーンの背景イメージ
image: スプラッシュスクリーンのイメージ
color_dark: デバイス設定がダークモードの時の背景の色
background_image_dark: デバイス設定がダークモードの場合の背景イメージ
image_dark: デバイス設定がダークモードの場合のスプラッシュスクリーンのイメージ
android_gravity: アンドロイドのスプラッシュイメージの位置を設定します。(bottom, center, center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, top)
ios_content_mode: iOSでスプラッシュイメージの位置を設定します。(scaleToFill, scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight)
web_image_mode: ウェブでスプラッシュイメージの位置を設定します。(center, contain, stretch, cover)
fullscreen: スプラッシュスクリーンをフールスクリーンで表示する(true, false)
info_plist_files: info.plistの名前を変更した場合、当該ファイルを設定するためオプション

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

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

flutter pub run flutter_native_splash:create

Tip

flutter_native_splashパッケージを使ってスプラッシュイメージを生成したら、特に修正しなくてもスプラッシュスクリーンが表示されます。

スプラッシュスクリーンを次のTipと一緒に使うとより便利です。

初期データ

普通スプラッシュスクリーンを画面に表示した後、初期データを持ってきます。この時次のようにFutureとasync-awaitを使ってスプラッシュスクリーンを表示した状態でデータを取ってくることができます。

import 'package:flutter/material.dart';

Future<void> main() async {
  bool data = await fetchData();
  print(data);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

Future<bool> fetchData() async {
  bool data = false;

  // Change to API call
  await Future.delayed(Duration(seconds: 3), () {
    data = true;
  });

  return data;
}
...

main関数をasync-awaitで変更した後、runAppを使って、アプリを実行する前データを取ってきます。この構造にすると、スプラッシュスクリーンを表示した状態でデータを取ってくることができます。

ステータスバー

このブログポストではpubspec.yamlへfullscreen: trueを設定してスプラッシュスクリーンを生成しました。flutter_native_splashのバグか分からないですが、iOSではアプリが実行された後、ステータスバー(Status Bar)が表示されません。それで、次のようにコードを修正してステータスバーを表示します。

...
import 'package:flutter/services.dart';
...
class Home extends StatelessWidget {
  Home() {
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: SystemUiOverlay.values,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Hello world!'),
      ),
    );
  }
}

Android 12

Android 12から基本的アプリのアイコンがスプラッシュスクリーンで表示されます。flutter_native_splashではアプリアイコンの代わり他のイメージを表示させるオプションを提供しています。

flutter_native_splash:
 android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    #image: assets/android12splash.png

    # Splash screen background color.
    #color: "#42a5f5"

    # App icon background color.
    #icon_background_color: "#111111"

    # The branding property allows you to specify an image used as branding in the splash screen.
    #branding: assets/dart.png

    # The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
    # apply when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

ここで表示されるイメージは円形でカットされて表示されます。なので、私はこのオプションを使わなくandroid/app/src/main/AndroidManifest.xmlファイルに下記の内容を追加して使っています。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">
   <application
        android:label="app"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            ...>
            ...
            <!-- Displays an Android View that continues showing the launch screen
                Drawable until Flutter paints its first frame, then this splash
                screen fades out. A splash screen is useful to avoid any visual
                gap between the end of Android's launch screen and the painting of
                Flutter's first frame. -->
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                ...
            </intent-filter>
        </activity>
        ...
    </application>
</manifest>