【Flutter入門】スプラッシュスクリーンを3ステップで簡単に導入する

アプリを起動するときに、起動の待ち時間の間に表示される画面があります。それがスプラッシュスクリーンです。

スプラッシュスクリーンがないとユーザーは起動の待ち時間に真っ白な画面を眺めることになります。それでは見栄えが悪し簡単に実装できるので、スプラッシュスクリーンを用意すると良いでしょう。

flutter_native_splashをインストール

Flutterでスプラッシュスクリーンを表示する flutter_native_splash というパッケージがあるので、それを利用しましょう。pubspec.yamに以下のように追加します。

dependencies:
  flutter_native_splash: ^2.2.19

flutter pub get を実行してパッケージをインストールしてください。

プロジェクトのpubspec.yamlなどのファイルがあるルートディレクトリに、flutter_native_splash.yamlという名前のファイルを作成し、以下の内容で保存してください。

flutter_native_splash:
  image: assets/splash.png
  color: "ffffff"
  android: true
  ios: true

これがスプラッシュスクリーンの設定になります。imageは使用する画像、colorは背景色、androidとiosはそれぞれのOSでスプラッシュスクリーンを表示するかの設定になります。

スプラッシュスクリーンに表示する画像は assets/splash.png に保存してください。assetsが未作成の場合は、プロジェクトのルートディレクトリに作成してください。

ターミナルで以下のコマンドを実行して、スプラッシュスクリーンを生成します。

flutter pub run flutter_native_splash:create

このコマンドは、flutter_native_splashパッケージを使って、アプリのスプラッシュスクリーンを作成して、プロジェクトに適用しています。
それぞれのOS用にリソースの配置と設定が自動的に行われるため、このコマンド一発で完了です。

必要な手順は以上です。あとはアプリを起動すると待機画面で設定したスプラッシュスクリーンが表示されます。驚くほど簡単に設定できるのでぜひやってみてください。