【Flutter】スプラッシュ画面を実装してみる【flutter_native_splash】

本記事で行うこと。

1. flutter_native_splashを導入する
2. pubspec.yamlファイルを設定する
3. スプラッシュ画面を作成する

1. flutter_native_splashを導入する

そもそもスプラッシュ画面とは？

アプリを起動すると、起動画面を表示するまでに少し時間がかかります。
その起動画面が表示するまでの時間に表示される画面がスプラッシュ画面です。
デフォルトだと、読み込んでる間は白背景、つまり白いスプラッシュ画面が表示されます。
Flutter製アプリの実装では、スプラッシュ画面を作る手段の一つとして、
flutter_native_splashパッケージがあります。
とても簡単に実装できたので、オススメです。
パッケージを使わなくても、スプラッシュ画面を作ることができるみたいです。

flutter_native_splashを導入する。

pubspec.yaml

dependencies:
  flutter_native_splash: ^1.1.5+1

pubspec.yamlファイルのdependenciesに記述した後、
pub getを行うの忘れないようにしましょう。
これで、導入は完了です。

2. pubspec.yamlファイルを設定する

今回のパッケージはdartファイルにインポートせずに使用することができます。
インポートの代わりに、pubspec.yamlファイルに設定を記述する必要があります。
画像と背景色を設定していきます。

pubspec.yaml

～～～～～～
dependencies:
  flutter_native_splash: ^1.1.5+1

flutter_native_splash: //インデント注意
  image: "images/splash.png"  //表示したい画像
  color: "FAF3F3"  //背景色、カラーコードで指定

dev_dependencies:
  flutter_test:
    sdk: flutter

～～～～～～

これで設定は完了です。

3. スプラッシュ画面を作成する

最後にflutterコマンドを使用して、設定した内容でスプラッシュ画面を作成します。

$ flutter pub run flutter_native_splash:create

これで作成できました、動作確認してみましょう。

これで、スプラッシュ画面を実装することができました。