- パッケージ「flutter_native_splash」をインストール
- 「android:windowFullscreen」をfalseに設定する
アプリをかっこよく魅せるスプラッシュ画面。ただ、意外と実装がめんどうかも…と思ってしまう方も多くいると思います。
そこで、本記事では、プラグインを使用して5分でスプラッシュ画面を実装する手順を紹介します。

自分で実装するのも良いですが、プラグインに任せたほうが楽ちんでした!
Flutterでスプラッシュ画面を実装する方法
以下の4ステップで簡単に実装できます。
- パッケージ「flutter_native_splash」をインストールする
- スプラッシュ画面に表示する画像をpng形式で用意する
- プラグインの設定をする(スプラッシュ画面の設定)
- コマンドをターミナルから打って、スプラッシュ画面を生成
簡単に解説していきます。
1.パッケージ「flutter_native_splash」をインストールする
スプラッシュ画面の実装には「flutter_native_splash」というパッケージを使用します。
インストール方法は以下。
pubspec.yamlファイルに以下の定義を追加して、例のごとくPub getする。
dependencies:
flutter_native_splash: ^0.1.9
2.スプラッシュ画面に表示する画像をpng形式で用意する
本プラグインでは、PNG形式の画像ファイルのみの対応です。
PNGファイルを用意したら、任意の場所に格納しましょう。
本記事では、以下のように「images」に「topImage.png」を格納した前提で解説します。

3.プラグインの設定をする(スプラッシュ画面の設定)
pubspec.yamlファイルに設定を記載することで、使用する画像や、スプラッシュ画面の背景色、適用するOSの設定などができます。
詳しくは「flutter_native_splash」の「Readmeページ」を参照ください。
以下では、先程準備したPNGファイルを白い背景に写す設定です。
# スプラッシュ画面のプラグインの設定
flutter_native_splash:
image: images/topImage.png
color: "ffffff"
fill: false
4.コマンドをターミナルから打って、スプラッシュ画面を生成
最後に、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>
まとめ
- パッケージ「flutter_native_splash」をインストール
- 「android:windowFullscreen」をfalseに設定する
上記がまとめですが、各種設定がちょっと厄介なので、本文を参考に設定してみてください。
もし、分かりにくい点や不備があれば、何なりとコメントなどでお知らせください!
最後まで読んでいただき、ありがとうございます。
コメント