🌅

【Flutter】コマンド一発でスプラッシュ画面を実装する【flutter_native_splash】

2022/04/08に公開

はじめに

Example

せっかく作るアプリだから、長く使ってもらいたいですよね。アプリを起動したときの体験がよりよいものになればアプリへの愛着がわいて長く使ってもらえるようになるかもしれません。

多くのユーザーが使う他のアプリのように、アプリを起動したときに表示するクールなスプラッシュ画面を実装したいと思うと思います。しかし、OS やデバイスの解像度に合うように様々なサイズの画像を準備する必要があってめちゃくちゃ大変です。

Flutter では様々な OS や端末サイズに対応したスプラッシュ画面を自動で生成してくれるパッケージ flutter_native_splash がありますので導入方法について紹介します。flutter_native_splash を使えば、次のようなスプラッシュ画面が簡単に作れます。

Android 11

https://pub.dev/packages/flutter_native_splash

環境

Flutter 2.10.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c860cba910 (13 days ago) • 2022-03-25 00:23:12 -0500
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2

手順

スプラッシュ画像を用意する

まずはスプラッシュ画面に表示するスプラッシュ画像を用意しましょう。

  • 縦横サイズは 768px
    • 特にサイズの指定はありませんが後述する Android 12 対応を考慮すると 768px が都合が良いです
  • 円の中に画像を収める
    • 必須ではありませんが後述する Android 12 対応を考慮すると収めたほうが望ましいです
  • ファイル形式は png
  • 背景透過あり
    • 無しでもOKですが透過したほうが見栄えが良くなります

今回は次の画像を icon8 からダウンロードして少し加工しました。

https://icons8.jp/

splash.png
縦横 768px / 円の中に画像を収める / png形式 / 背景透過あり

Android 12 から新しいスプラッシュ画面である SplashScreen が導入されました。Android OS 側でスプラッシュ画像を勝手に切り取るので、周りに余白を設けた画像を用意する必要があります。もし Android 12 用の画像を指定しなかった場合は、アプリの起動アイコンが勝手に表示されますので出来れば用意しましょう。

  • 縦横サイズは 1152px
  • 直径 768px の円の中に画像を収める
  • ファイル形式は png
  • 背景透過あり

先に用意した画像と違うのは縦横サイズだけですので、周りに余白を設けるだけです。PEKO-STEP のサイズ変更機能を使って加工しました。

https://www.peko-step.com/tool/resize.html

splash_android12.png
縦横 1152px / 直径 768px の円の中に画像を収める / png形式 / 背景透過あり

それぞれ以下に保存しておきます。

assets
└── images
    ├── splash.png
    └── splash_android12.png

pubspec.yaml を編集する

pubspec.yaml
dev_dependencies:
+  flutter_native_splash: ^2.1.3+1

+flutter_native_splash:
+  color: '#add8e6'
+  image: 'assets/images/splash.png'
+  color_dark: '#262626'
+  image_dark: 'assets/images/splash.png'
+  fullscreen: true
+  android_12:
+    icon_background_color: '#add8e6'
+    image: 'assets/images/splash_android12.png'
+    icon_background_color_dark: '#262626'
+    image_dark: 'assets/images/splash_android12.png'

説明

  • ^2.1.3+1の部分は最新バージョンを指定してください。
  • それぞれのスプラッシュ画像と背景色は、Android 12 かそれ以外か(Android 11 以下+iOS+Web)や、ダークテーマ ON / OFF で異なる値を指定することも出来ます。
  • fullscreentrue にすると通知バーが非表示になります。
    • Web は通知バーが無いので非サポートです。

コマンドを実行してスプラッシュ画面を生成する

以下のコマンドを実行してスプラッシュ画面を生成してもらいます。

flutter pub get
flutter pub run flutter_native_splash:create

動作確認する

準備は以上です。簡単ですね!
各 OS でビルドして実行してスクリーンショットを取りましたので参考にしてください。

  • Android 11(Pixel 4)
ダークテーマ OFF ダークテーマ ON 
Android 11 Android 11 Dark
  • Android 12(Pixel 5)
ダークテーマ OFF ダークテーマ ON 
Android 12 Android 12 Dark
  • iOS 15.4(iPhone 12 Pro)
ダークテーマ OFF ダークテーマ ON 
iOS 15 iOS 15 Dark
  • Web(Chrome 99)
ダークテーマ OFF ダークテーマ ON 
Web Web Dark

スプラッシュ画像の表示位置の変更と拡大

デフォルトではスプラッシュ画面中央に表示されるスプラッシュ画像ですが、表示位置を変更したり拡大することが出来ます(縮小についてはここでは扱いません)。OS 毎に指定方法が異なりますので、それぞれ紹介します。

Android の場合

pubspec.yamlandroid_gravity の指定を追加します。デフォルトは center です。top|left のように複数指定することもできます。

pubspec.yaml
flutter_native_splash:
+  android_gravity: center
top|left     top    top|right
top-left top top-right
 left  center right 
left center right
bottom|left     bottom    bottom|right
bottom-left bottom bottom-right
     fill       fill_horizontal  fill_vertical 
fill fill_horizontal fill_vertical

iOS の場合

pubspec.yamlios_content_mode の指定を追加します。デフォルトは center です。Android のように複数指定することはできません。

pubspec.yaml
flutter_native_splash:
+  ios_content_mode: center
TopLeft    top    topRight
topLeft top topRight
 left  center right 
left center right
bottomLeft    bottom    bottomRight
bottomLeft bottom bottomRight
  scaleToFill   scaleAspectFit  scaleAspectFill
scaleToFill scaleAspectFit scaleAspectFill

Web の場合

pubspec.yamlweb_image_mode の指定を追加します。デフォルトは center です。表示位置の変更はできません。

pubspec.yaml
flutter_native_splash:
+  web_image_mode: center
center  contain stretch  cover 
center contain stretch cover

スプラッシュ画面にブランディング画像(会社ロゴ)を表示する

スプラッシュ画面に会社ロゴなどのブランディング画像を表示することが出来ます。
まずはブランディング画像を用意しましょう。

  • 縦横サイズは 縦 240px x 横 600px
    • 特にサイズの指定はありませんが、縦横比は 2:5 である必要があります。
  • SafeArea を意識して画像内下部に余白を設ける
  • ファイル形式は png
  • 背景透過あり
    • 無しでもOKですが透過したほうが見栄えが良くなります

会社ロゴ
240px x 600px / 画像内下部に余白を設ける / png形式 / 背景透過あり
我が社の会社ロゴを使用しました

pubspec.yaml にブランディング画像の指定を追加します。branding_mode はブランディング画像の表示位置です。 bottom | bottomRight | bottomLeft を指定でき、デフォルトは bottom です。

pubspec.yaml
flutter_native_splash:
+  branding: 'assets/images/branding.png'
+  branding_dark: 'assets/images/branding.png'
+  branding_mode: bottom
  Android 11(Pixel 4)     Android 12(Pixel 5)   iOS 15.4(iPhone 12 Pro)
Android 11 Android 12 iOS 15

Android 12 のスプラッシュ画像のアニメーションは非サポート

Android 12 から導入された SplashScreen にはスプラッシュ画像のアニメーションがサポートされていますが、本パッケージは非サポートです。

Android 12 でデバッグ実行時にスプラッシュ画像が表示されない

Android 12 端末を使ってデバッグ実行をしてもスプラッシュ画像が表示されません。手間ですが一度デバッグ実行を終了して起動アイコンタップで起動し直せば表示されます。

Android12でスプラッシュが出ない

最後に

Flutter 大学という Flutter エンジニアに特化した学習コミュニティに所属しています。オンラインでわいわい議論したり、Flutter の最新情報をゲットしたりできます!ぜひ Flutter 界隈を盛り上げていきましょう!

https://flutteruniv.com?invite_id=9hsdZHg0qtaMIr6RPRulAaRJfA83

あわせて読みたい

https://dev-yakuza.posstree.com/flutter/splash-screen/

https://zenn.dev/web_tips/books/df8423bbb204a1/viewer/60cdda

https://zenn.dev/yurihondo/articles/7da088ec4540c0

Discussion