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

2021-04-30 hit count image

今回のブログポストではFlutterでスプラッシュスクリーンを変更する方法について説明します。

概要

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

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

しかし、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

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

次はスプラッシュスクリーンで使うイメージファイルを設定する必要があります。pubspec.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と一緒に使うとより便利です。

初期データ

普通スプラッシュスクリーンを画面に表示した後、初期データを持ってきます。この時次のようにFutureasync-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.yamlfullscreen: trueを設定してスプラッシュスクリーンを生成しました。flutter_native_splashのバグか分からないですが、iOSではアプリが実行された後、ステータスバー(Status Bar)が表示されません。それで、次のようにコードを修正してステータスバーを表示します。

...
import 'package:flutter/services.dart';
...
class Home extends StatelessWidget {
  Home() {
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
  }

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

完了

これでFlutterでスプラッシュスクリーンを変更する方法についてみてみました。flutter_native_splashパッケージを使うとこのようにもっと簡単にFlutterアプリのスプラッシュスクリーンを変更することができます。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

Posts