【Flutter】スプラッシュ画面の実装方法と注意点【5分で完成】

アプリをかっこよく魅せるスプラッシュ画面。ただ、意外と実装がめんどうかも…と思ってしまう方も多くいると思います。

そこで、本記事では、プラグインを使用して5分でスプラッシュ画面を実装する手順を紹介します。

本多

自分で実装するのも良いですが、プラグインに任せたほうが楽ちんでした！

Flutterでスプラッシュ画面を実装する方法

以下の4ステップで簡単に実装できます。

簡単に解説していきます。

１．パッケージ「flutter_native_splash」をインストールする

スプラッシュ画面の実装には「flutter_native_splash」というパッケージを使用します。

インストール方法は以下。

pubspec.yamlファイルに以下の定義を追加して、例のごとくPub getする。

dependencies:
  flutter_native_splash: ^0.1.9

２．スプラッシュ画面に表示する画像をpng形式で用意する

本プラグインでは、PNG形式の画像ファイルのみの対応です。

PNGファイルを用意したら、任意の場所に格納しましょう。

本記事では、以下のように「images」に「topImage.png」を格納した前提で解説します。

３．プラグインの設定をする（スプラッシュ画面の設定）

pubspec.yamlファイルに設定を記載することで、使用する画像や、スプラッシュ画面の背景色、適用するOSの設定などができます。

詳しくは「flutter_native_splash」の「Readmeページ」を参照ください。

以下では、先程準備したPNGファイルを白い背景に写す設定です。

# スプラッシュ画面のプラグインの設定
flutter_native_splash:
  image: images/topImage.png
  color: "ffffff"
  fill: false

４．コマンドをターミナルから打って、スプラッシュ画面を生成

最後に、AndroidStudioのターミナルで以下のコマンドを入力して完成です。

flutter pub pub run flutter_native_splash:create

Flutterでスプラッシュ画面を実装したあとの注意点

問題：Androidでは、Statusバーが表示されなくなる(時がある？)

自分の環境では、上記の対応をしたあとに、Android端末のみ、画面上部のstatusバーが消えました。

対処：「android:windowFullscreen」をfalseに設定する

上記問題にぶつかった方は、以下の対応で直ります。

android>app>src>main>res>values>styles.xml ファイルを開いて、「android:windowFullscreen」をfalseに設定します。

• 変更前

<item name="android:windowFullscreen">true</item>

• 変更後

<item name="android:windowFullscreen">false</item>

まとめ

上記がまとめですが、各種設定がちょっと厄介なので、本文を参考に設定してみてください。

もし、分かりにくい点や不備があれば、何なりとコメントなどでお知らせください！

最後まで読んでいただき、ありがとうございます。