Flutterでスプラッシュ画面を作る
目次
目的
Flutterアプリのスプラッシュ画面（起動画面）を作成します。
Flutterで開発したアプリのスプラッシュ画面は「真っ白」がデフォルトです。
パッケージ「flutter_native_splash」を使用してスプラッシュ画面を作成します。
スプラッシュ画面とは
アプリ起動時に表示される画像のことです。
一般的には、ブランドに沿ったカラーやアイコンが表示されることが多いです。
Flutterのデフォルトでは以下のように、白色の起動画面が表示されます。
「スプラッシュ画面」は、「起動画面」とも呼ばれることがあります。
Android側では同じ意味で使用しているようです。
iOS側では、「Launch Screen」と「Splash Screen」を区別しているようです。
- Launch Screen
- Splash Screen
「Luanch Screen」は、アプリ起動時に表示される画面のことです。アプリ起動時にOSが自動で表示します。
「Splash Screen」は、アプリ起動後に表示する画面のことで、開発者が意図的に表示させる画面のことです。
Apple公式 アプリの起動について：https://developer.apple.com/jp/design/human-interface-guidelines/launching
環境
- PC : Mac mini (Apple M4)
- OS : Sequoia 15.5
- Flutter 3.32.8
- flutter_native_splash 2.4.6
- Simulator 16.0(1042.1)
実装1
まずは簡単に起動画面の背景色を変更してみます。
パッケージ「flutter_native_splash」のインストール
https://pub.dev/packages/flutter_native_splash pub.dev
Native Splash Screen [2022] 動画による解説
dev_dependencies:
flutter_native_splash: ^2.4.6起動画面だけの利用であれば、「dev_dependencies」への記述で十分ですね。
「flutter_native_splash.yaml」の作成
プロジェクトのルートに「flutter_native_splash.yaml」ファイルを新規作成します。
内容を以下のように記述してください。
flutter_native_splash:
color: "#0000FF" # 青色の背景
android: true
ios: true起動画面の生成
コマンドを実行します。
dart run flutter_native_splash:create動作確認
アプリの起動画面が青色になりましたね！
実装2
次はpng形式の画像を表示してみます。
画像の準備
適当なpng画像を用意します。
画像サイズは1152pxで、中央768px円周にロゴが収まるようにします。
Androidでは、ある程度padding領域がないと見切れてしまいます。
「assets/」に保存します。
「flutter_native_splash.yaml」の準備
「flutter_native_splash.yaml」ファイルを以下のように記述してください。
flutter_native_splash:
color: "#0C6FCC"
image: assets/flutter.png
android_12:
image: assets/flutter.png
color: "0C6FCC"起動画面の生成
先ほどと同じく以下のコマンドを実行します。
dart run flutter_native_splash:create動作確認
無事、画像も表示されました。
バグ
背景色を変更したところ、変更前の色と変更後の色が表示されました。キャッシュ関係のバグのようです。
Simulatorから対象のアプリを削除し、Simulatorを再起動したところバグは発生しませんでした。
以上