FlutterでSplashスクリーンを設定する

SplashScreenとは？

アプリを起動させた時にアイコンが中央に表示される画面のことです。
これがあるだけで、大分アプリっぽくなりますよね😊

実装にはiOSとAndroidで異なる手順を踏まなくてはいけなくなるので、
それぞれについて説明していきます。

iOS

iOSは比較的簡単な手順で済みます。
1. project/ios/Runner/Assets.xcassets/LaunchImage.imageset/配下に画像を保存
2. project/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.jsonを編集
以上の2つのみです。

画像を保存

この時、画像は1x, 2x, 3xの3つの倍率を用意しなければいけません。
カスタムで4xの倍率を用意してもいいみたいです。

Contents.jsonの編集

Contents.jsonを以下のコードに書き換えます。

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "画像ファイル名.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "画像ファイル名@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "画像ファイル名@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "画像ファイル名@4x.png",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

Android

Androidは結構苦戦しました💦
その時遭遇したエラー対処方法なども一緒に載せておくので、合わせてみていただけると
問題なくできると思います。
1. project/android/app/src/main/res/配下に画像を保存
2. project/android/app/src/main/res/values/styles.xmlを編集
3. project/android/app/src/main/res/drawable/launch_backgound.xmlに追加
以上の3つの手順になります。

画像を保存する

AndroidはiOSと異なり、hdpi,mdpi,xhdpi,xxhdpi,xxxhdpiの5つの倍率を用意しなければいけません。
また、{フォルダ名}-hdpi/{画像ファイル名} のように、それぞれの倍率をディレクトリごとで分けなければいけないので少し面倒です💦
ここで画像ファイル名を決める時に、大文字と-(ハイフン)は使用できないので注意してください！
a-zと0-9と_(アンダースコア)のみになりますので、iOSの方で画像名に大文字を使用している場合は変更が必要になります。

styles.xmlを編集

styles.xmlを以下のコードに書き換えます。
カラーコードが書かれているところは背景色の色なので、好きな色に変更することができます。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@フォルダ名/launch_background</item>
    </style>
    <!-- #FFFFFFはカスタム可能です-->
    <color name="background">#FFFFFF</color>
</resources>

launch_background.xmlを編集

android:drawableを@color/backgroudに置き換えます。
これによりstyles.xmlで指定した背景色に変更することができます。
また、新たにitemタグを追加してください。

...
<item android:drawable="@color/background"/>
<item
        android:drawable="@フォルダ名/画像ファイル名"
        android:gravity="center" />
...

エラー対処

adb: failed to install /Users//Desktop/flutter_sample/build/app/outputs/apk/app.apk: Failure [INSTALL_FAILED_INSUFFICIENT_STORAGE] Error launching application on Android SDK built for x86.

実行しようとすると上記のエラーが出て、デバッグできないようなことがありました。
これは、エミュレータのStorageがいっぱいになっているのが原因でした。
- エミュレータの不要なアプリを消す
- 新規のエミュレータを作成する
このどちらかを行えば解決しました。
SplashScreenとは関係のないエラーですが、参考までに記述しておきます。

Splashスクリーンの表示アイコンが大きすぎる

もう一つはAndroidのみで起きた現象ですが、用意したアイコンが大きすぎたのか、画面いっぱいにアイコンが表示されてしまいました。
この対処にはlaunch_background.xmlを追加で編集する必要があります。
先ほど追加したitemタグの要素にwidthとheightを指定してあげるといい感じに修正できました👍

<item
        android:width="200dp" <--追加
        android:height="200dp" <--追加
        android:drawable="@mipmap/launch_splash"
        android:gravity="center" />

まとめ

Androidでやけに苦戦しまいましたが、なんとか実装ができました！
次回はアプリアイコンについてやろうかなと思います👍
誰かのお役に立てたら嬉しいです😊✨
それではまた！

参考文献

https://qiita.com/shinki_uei/items/c0b9b9a6d25e280c7bec
https://www.developerlibs.com/2018/07/flutter-how-to-fix-white-screen-on-app.html
https://miajimyu.hatenablog.com/entry/2019/09/30/212723