Flutterのアプリを起動すると、しばらく白い画面が表示されますよね。
デバッグビルドだけかと思っていたら、そうでもない。
リリースビルドでも、結構最初の画面が出るまで、その白い画面が表示されている時間が長い。

これはなんぞ？ Flutterの諸々初期化に時間がかかってやむを得ない現象なのか？回避方法は無いのか？

と思っていたら、androidやiosの各フォルダに、こんなファイルがあるのに気づきました。

]

なんぞ？と思ってそれぞれのファイルや、同じフォルダにあるREADME.mdを読んでみたところ。

どうやら、スプラッシュ画面用のリソースを設定するところのようで、デフォルトで真っ白なスプラッシュ画面が起動されているのだと判明しました。

そこで、この画像を差し替えればいいじゃん！と思って作り始めたもののの・・・

解像度別に用意するの面倒くさいorz

となって、

「アプリアイコンも便利なジェネレータ作って下さっている方がいた。スプラッシュだって有るに違いない」

と探す旅に出たら、案外サクッと見つけてサクッと入れられたので、紹介します。

環境など

参考サイト

他にも色々出てきますが、上記の記事が分かりやすかったです。

flutter_native_splashというパッケージを入れます。
pubspec.yamlに追加ですね。アプリの実行には関係ないので、dev_dependenciesの方に入れます。

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter

  ...

  # splash
  flutter_native_splash: ^0.1.9

依存ライブラリの指定の後に、以下の記述を入れます。

pubspec.yaml

# splash generate sources
flutter_native_splash:
  image: "assets/splash/splash.png"
  color: "97d4d9"

インデントに注意してください。flutter_native_splash:はdev_dependencies:等と同じ階層になければなりません。

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter

  ...

  # splash
  flutter_native_splash: ^0.1.9

flutter_native_splash:
  ...

こういう形になっているはずです。

スプラッシュは、背景色＋ロゴ画像で表示されます。

pubspec.yamlで指定した、imageのパスに、ロゴ画像を配置します。
colorに、背景色をRGB形式で指定します。

画像を画面いっぱいに表示するfill指定も可能です。詳しくは、パッケージのページで確認して下さい。

コンソールなどで以下のように実行するだけ。

$ flutter pub get
$ flutter pub run flutter_native_splash:create

画像がそれぞれ、以下に配置されます。

基本的には以上でスプラッシュが白い画面から、自分が作成したロゴ表示に変わります！

端末のキャッシュによるところがあるみたいですので、一度アンインストールして再インストールすると良いようです。