アプリ名やアイコン設定までFlutterで完結！ 開発者向けツールを紹介

Flutterで始めるモバイルアプリ開発 第29回

スプラッシュ画像の設定

　アプリアイコンを設定したら、続いてスプラッシュ画像の設定です。ただし、アプリアイコンと同様、Androidの場合には、Android12からリファレンスのスプラッシュ画面を参照するとわかるように、自由な大きさの画像を表示できるわけではありません。そのため、アプリアイコンの作り方と同様の考え方で画像を作成する必要があります。

　また、Android12以降用のスプラッシュ画像が設定されていない場合には、自動的にアプリアイコンが利用されるので、同じアイコンで問題なければあえてAndroid12以降に対応したスプラッシュ画像を設定する必要はありません。

　iOSの場合は768px以上の透過PNGを用意してください。

flutter_native_splashのインストールと設定

　スプラッシュ画像を設定するには、flutter_native_splashを利用すると簡単に設定が行えます。

　インストールするにはプロジェクトフォルダ配下に入り、リスト10のようにコマンドを実行します。

［リスト10］flutter_native_splashのインストール

$flutter pub add flutter_native_splash

　なお、設定はpubspec.yamlに記述しても構いませんが、別ファイルの方が管理しやすいため、著者は「flutter_native_splash.yaml」というファイルを作っています。

　例えば、iOSとAndroid11までのスプラッシュ画像を設定する場合には、リスト11のように、背景色（color）とスプラッシュ画像本体（image）の設定のみで問題ありません。ただし、web指定は作成時にワーニングが表示されるため意図的に無効にしています。

［リスト11］flutter_native_splash.yamlの設定例（iOSのみ）

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/images/splash.png

  web: false

　また、Android12以降のスプラッシュ画像を設定する場合には、リスト12のように通常画像とダークモード時で別々の画像や背景を設定することも可能です。

［リスト12］flutter_native_splash.yamlの設定例（Android12以降の対応）

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/images/splash.png

  android_12 :
      image: assets/images/splash_android.png
      icon_background_color: "#FFFFFF"
      image_dark: assets/images/splash_android.png
      icon_background_color_dark: "#121212"
  web: false

　設定が完了したら、リスト13のように「dart run flutter_native_splash:create」で各ネイティブプロジェクトに反映させます。

［リスト13］flutter_native_splashを用いたスプラッシュ画面の設定

$dart run flutter_native_splash:create
Building package executable...
(省略)
[Android]  - android/app/src/main/res/drawable/launch_background.xml
(省略)
[iOS] Creating  images
[iOS] Updating ios/Runner/Info.plist for status bar hidden/visible
(省略)

　また、設定されていることを確認するためには、Androidであれば実行時に表示されているファイルを参照することで、iOSの場合にはアプリアイコンと同様にXCodeを開くことで確認できます。

最後に

　今回は、スマホアプリでの共通する項目（アプリ名やスプラッシュ画像など）で、通常であればプラットフォームごとに異なる設定になってしまうものについて紹介しました。

　アプリ配布用のリリースビルドは、開発者誰もが必ず行うものではなく、またFlutterというネイティブ非依存の言語だからこそ、余計に分からない、もしくは面倒だと感じる部分があります。

　今回紹介した内容で設定だけは共通にできるものの、その制限やポリシーはどうしてもネイティブアプリ側に依存するため、まったくネイティブアプリ側の事情が分からなくても対応できるというものでもありません。

　そして、リリースビルドをする際にはこれ以外にも、ネイティブプラットフォーム側に残ってしまう特有の設定や手順もあります。次回はそちらについて紹介したいと思います。

参考資料

• Flutter
• Apple Developerサイト
• Android Developerサイト
• flutter_native_splash
• flutter_launcher_icons