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

【Flutter】スプラッシュ画面の実装方法と注意点【5分で完成】-アイキャッチ 技術メモ
結論を先にまとめると…
  • パッケージ「flutter_native_splash」をインストール
  • 「android:windowFullscreen」をfalseに設定する

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

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

本多
本多

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

手順は目次の通りです

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

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

  1. パッケージ「flutter_native_splash」をインストールする
  2. スプラッシュ画面に表示する画像をpng形式で用意する
  3. プラグインの設定をする(スプラッシュ画面の設定)
  4. コマンドをターミナルから打って、スプラッシュ画面を生成

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

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バーが消えました。

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に設定する

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

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

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

コメント

タイトルとURLをコピーしました