flutter_native_splashパッケージを使ういい感じにできるっぽい。
対応しているのは、Android/iOS/Web。
flavorにも対応しているけど、Desktop系は非対応。
Flutter公式のドキュメントはこのあたり。
- Android: Adding a splash screen to your Android app | Flutter
- Android12(API 31)以降はSplashScreen API用の設定項目
- スプラッシュ画面 | Android デベロッパー | Android Developers
- iOS: Adding a launch screen to your iOS app | Flutter
使い方
まずはインストール
# インストール $ fvm flutter pub add flutter_native_splash
flutter_native_splash.yamlを用意し、
各種コマンドを実行すればOK
# スプラッシュ画面の作成 $ fvm flutter pub run flutter_native_splash:create # スプラッシュ画面の削除 $ fvm flutter pub run flutter_native_splash:remove
設定ファイル
$ touch flutter_native_splash.yaml
flutter_native_splash: # 必須: 背景の色 color: "#ffffff" # 必須: 中央のアプリアイコンの画像 image: assets/logo.png # 下のブランディング画像 branding: assets/branding.png # ダークテーマ時の設定 color_dark: "#121212" image_dark: assets/logo.png branding_dark: assets/branding.png # Android12以降用の設定 android_12: image: assets/logo.png icon_background_color: "#ffffff" branding: assets/branding.png image_dark: assets/logo.png icon_background_color_dark: "#121212" branding_dark: assets/branding.png
アイコンのサイズ
書かれているアイコンサイズはこんな感じ。
- Android12以降(アダプティブアイコンと同じ)
- icon backgroundなし: 1152×1152px(セーフエリア: 768px)
- icon backgroundあり: 960×960px(セーフエリア: 640px)
また、exampleの画像サイズはこんな感じだった。
image:... 550x1000(px/png/縦長)branding:... 360x189(px/png/横長)android_12.image... 960x960(px/png)
ソースはここを参照。
スプラッシュ画面を任意のタイミグで閉じる
デフォルトだと、自動的にスプラッシュ画面が閉じられるが、
初期化処理などの後までは残しておきたいときもある。
preserve()とremove()を使うと、好きなタイミングにできるよう。
import 'package:flutter_native_splash/flutter_native_splash.dart'; void main() { WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized(); FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding); runApp(const MyApp()); } // whenever your initialization is completed, remove the splash screen: FlutterNativeSplash.remove();
flavor対応
flavorにも対応してるけど、ちょっと設定が必要。。
flavorの設定がされている前提。
設定ファイルはflutter_native_splash-<flavor>.yamlを用意。
# 設定画面の作成 $ touch flutter_native_splash-{dev,stag,prod}.yaml # スプラッシュ画面の作成: flavor $ fvm flutter pub run flutter_native_splash:create --flavor dev # 一括作成 $ fvm flutter pub run flutter_native_splash:create --flavors dev,stag,prod
Androidは追加の設定は不要。
flutter_native_splash:create --flavor devを実行すると、
以下のファイルが作成される。
ios/Runner/Base.lproj/LaunchScreenDev.storyboardios/Runner/Assets.xcassets/LaunchBackgroundDev.imageset/ios/Runner/Assets.xcassets/LaunchImageDev.imageset/
作成直後だと、LaunchScreenDev.storyboardが認識されていないので、
xed iosでXcodeを開き、LaunchScreen.storyboardと同じRunner/ディレクトリにLaunchScreenDev.storyboardをDrag&DropするCopy items if neededをON
次にios/Runnser/Info.plistを開いて、
LaunchScreen.storyboardを切り替えられるように変更する。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>UILaunchStoryboardName</key>
- <string>LaunchScreen</string>
+ <string>$(LAUNCH_SCREEN_STORYBOARD)</string>
</dict>
</plist>
最後に、LAUNCH_SCREEN_STORYBOARDを各構成ファイルに追加しておけばOK。
devDebug.xcconfigの場合、
#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug-dev.xcconfig"
#include "Generated.xcconfig"
+ LAUNCH_SCREEN_STORYBOARD=LaunchScreenDev.storyboard
<flavor>Debug.xcconfigの場合、
#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug-dev.xcconfig"
#include "Generated.xcconfig"
+ LAUNCH_SCREEN_STORYBOARD=LaunchScreen.storyboard
READMEでは、Build SettingsのAdd User-Defined Settingで設定しているけど、
個人的には構成ファイルにまとめるほうが、見通しが良さそう。
また、Debug.xcconfigを参照する形でもよいかも。
#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
#include "Generated.xcconfig"
+ LAUNCH_SCREEN_STORYBOARD=LaunchScreen.storyboard
<flavor>Debug.xcconfigの場合、
#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug-stag.xcconfig"
#include "Generated.xcconfig"
+ #include "Debug.xcconfig"
注意点
READMEにいくつか注意書きが書かれてた。
- Android12以降の設定
- API31では表示されない場合がある。(API32以降では解決されるよう)
- Google以外のランチャーから起動すると、正しく表示されない場合がある
- 通知から起動した場合は、表示されない
- iOS
- スプラッシュ画面が更新されない場合がある
- キャッシュが残っているので、再起動や再インストールを試す
flutter cleanを試したりするとよい
- スプラッシュ画面が更新されない場合がある
以上!!
