💡

【Flutter】Android12でsplashが上手く表示されない場合の対処法

osanaiks

2023/02/22に公開

Flutterでは、flutter_native_splashと言うパッケージを使うと、アプリ起動時のsplash画面を簡単に実装することができます。ところが先日どうしてもAndroid12以降だと上手く表示できませんでした。そこで、その対処法をご紹介します🙋‍♂️

flutter_native_splash

ざっくり言うと、この4つの操作でsplashを実装できます。とってもお手軽です。

インストール
画像ファイルを追加
pubspec.yamlに情報を追記、
コマンド

改善前の状態

背景の色は変得られるのですが、アイコンの画像は表示されません。なお特にエラー文などは出てきません。

前提

このような環境で作業しました。

Flutter 3.7.2
Android12以降のシュミレーター
flutter_native_splashを使用
pubspeck.yamlにはandroid12も記載
flutter pub run flutter_native_splash:createコマンド打った
flutter clean flutter pub getコマンドも打った
pubspeck.yamlにはandroid12も記載

注意点ですが、Androidは12以降ではsplashに対するOS側の挙動が11以前と異なるようです（詳細は割愛）。また、flutter_native_splashでも、android12は別途記述するところがあるなど、扱いが少し違います。

iOS、Android(11以前)、 Android（12以降）の三つの環境がある、android12だと前述のようにつまづく可能性がある、とざっくり認識していいと思います。

対処

android/app/src/main/AndroidManifest.xmlにこちらのコードを貼り付けます。

<meta-data
 android:name="io.flutter.embedding.android.SplashScreenDrawable"
 android:resource="@drawable/launch_background"
 />

どこにmeta-data入れるの？って思った場合は下記をご覧ください。io.flutter.embedding.android.NormalThemeのmeta-dataと同じインデントで下に挿入しました。

  <application android:label="@string/app_name" android:name="${applicationName}" android:icon="@mipmap/ic_launcher">
    <activity android:name=".MainActivity" android:exported="true" android:launchMode="singleTop" android:theme="@style/LaunchTheme" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode" android:hardwareAccelerated="true" android:windowSoftInputMode="adjustResize">
      <!-- Specifies an Android theme to apply to this Activity as soon as
                 the Android process has started. This theme is visible to the user
                 while the Flutter UI initializes. After that, this theme continues
                 to determine the Window background behind the Flutter UI. -->
      <meta-data android:name="io.flutter.embedding.android.NormalTheme" android:resource="@style/NormalTheme"/>
      <meta-data android:name="io.flutter.embedding.android.SplashScreenDrawable" android:resource="@drawable/launch_background" /> // こっちを追加
      <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
    </activity>
    <!-- Don't delete the meta-data below.
             This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
    <meta-data android:name="flutterEmbedding" android:value="2"/>
  </application>

flutter pub run flutter_native_splash:createコマンドでよしなに修正してくれるのかと思ってましたが、そうではないようですね。

対応としては以上です。念の為flutter cleanとかコマンド打ってからもう一度ビルドしましょう。

まとめ

結構な時間を費やしてしまいました。皆さんの参考になれば、と思います🙇🏻‍♂️

参考資料

同様の現象が紹介され、AndroidManifest.xmlを修正するといい、と言ったことが記載されています

こちらは今回のバグ対応とは関係ないですが、native_splashの特にアイコン画像のことについて、細かく紹介されています。とても大変参考になります。

Flutter大学Publication

Flutter大学はFlutterエンジニアに特化した学習コミュニティです！初心者から中上級者まで幅広く在籍し、切磋琢磨しています！入会をご希望の方はこちらから→ flutteruniv.com

flutter_native_splash

改善前の状態

前提

対処

まとめ

参考資料

Discussion