【Flutter】スプラッシュ画像を設定する

はじめに

アプリのスプラッシュ画像を設定したので、その備忘録を記載します。

画像の選定方法

Android12にも対応できるように以下のサイズに設定しました。

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

画像の配置

assets
└── images
    └── splash
        └── splash.png

パッケージのインストール

flutter_native_splashを使用します

dev_dependencies:
  flutter_native_splash: ^2.4.1

pubspec.yamlに設定を追加

pubspec.yamlの一番下に以下の設定を追加します。

flutter_native_splash: 
  color: "#000000"  #背景色指定
  image: "assets/images/splash/splash.png"  #スプラッシュ画像を指定
  android_12: 
    icon_background_color: "#000000"  #Android12用の背景色指定
    image: "assets/images/splash/splash.png"  #Android12用のスプラッシュ画像を指定
  android: true
  ios: true
  fullscreen: true  #trueで通知バーが非表示になる 

自動生成

以下のコマンドを叩くと、スプラッシュ画面の設定が実行されます。

flutter pub get
flutter pub run flutter_native_splash:create

注意点

iOSの場合はflutter_native_splashを使用してスプラッシュ画面を実装すると、アプリでステータスバーが表示されなくなってしまいます。

対策としては、アプリの起動後すぐに、下記メソッドを実行するとステータスバーが表示されるようになります。

import 'package:flutter/services.dart';

・・・

// ステータスバーが常に表示されるように設定
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    
・・・

Android12の動作確認

Android12の場合は、デバック実行してもスプラッシュ画面は表示されませんでした。

以下の記事より、Android12の場合はデバック実行→アプリを閉じる→アイコンタップから起動しないと、スプラッシュ画面は表示されないようです。

画像を入れ替えたい場合

画像を入れ替えたい場合は、assets/images/splash内の画像を入れ替え、再度以下のコマンドを実行すると再生成されます。

flutter pub get
flutter pub run flutter_native_splash:create

※画像のファイル名を変更する場合は、pubspec.yamlの参照パスも変更が必要です。

参考

告知

最後にお知らせとなりますが、イーディーエーでは一緒に働くエンジニアを
募集しております。詳しくは採用情報ページをご確認ください。

みなさまからのご応募をお待ちしております。