Status/Notification bar still showing during splash screen on Android 12

[Nathan617]

Attention: If you open a bug report without sufficient details, it will be closed. Is your question
related to Android 12? Please check the notes on Android 12 first (https://pub.dev/packages/flutter_native_splash#android-12-support).

The status bar / notification bar still shows up when the splash screen shows. I need to have my splash screen full screen. Works on iOs but I keep having the status/notification bar in black on top during splash screen on Android 12.

A clear and concise description of what the bug is.

Android Studio : 2022.1
Xcode : 14.2
Flutter : 3.7.3
flutter_native_splash : ^2.2.17

Paste the flutter_native_splash section of your yaml config.

dependencies:
flutter:
sdk: flutter

cupertino_icons: ^1.0.2
pinput: ^2.2.23
flutter_secure_storage: ^8.0.0
get_it: ^7.2.0
get: ^4.6.5
cached_network_image: ^3.2.3
flutter_svg: ^2.0.1
flutter_easyloading: ^3.0.5
url_launcher: ^6.1.9
http: ^0.13.5
internet_connection_checker: ^1.0.0+1
flutter_native_splash: ^2.2.17

dev_dependencies:
flutter_test:
sdk: flutter

flutter_lints: ^2.0.0

Run commands to generate splash screen

1) flutter clean

2) flutter pub get

3) flutter pub run flutter_native_splash:create

flutter_native_splash:
image: assets/images/logo_transparent_white three_quarter_size.png
color: "EA4450"
fullscreen: true

Device (please complete the following information):

• Device: [Huawei Mate 20 Pro]
• OS: [EMUI version: 12.0.0]

To Reproduce
Steps to reproduce the behavior, using the example app:
I run it on my physical Huawei Mate 20 Pro phone.

Additional context
Works on iOS as it is full screen. Not Android 12.

[jonbhanson]

I am not aware of Android 12 having support for hiding the notification bar.

[Nathan617]

I am not aware of Android 12 having support for hiding the notification bar.

Do you mean that there is nothing we can do about this?

[jonbhanson]

I am not aware of Android 12 having support for hiding the notification bar.

Do you mean that there is nothing we can do about this?

Yes

[Nathan617]

But can we change the color of the status bar during the splash?

Sometimes when the app launches, the status bar has the same color as the Splash Screen background colour, then it revert to black.

[LastMonopoly]

Same problem on my Android, many other apps can hide their notification bar during splash screen showing.

[Nathan617]

Same problem on my Android, many other apps can hide their notification bar during splash screen showing.

Or at least change the color of the notification/status bar this would be great

[jonbhanson]

@LastMonopoly are you talking about Android 12? Can you give me an example of an app that hides the notification bar on the native splash screen on Android 12?

@Nathan617 I don't think it is possible to change the color of the notification bar on the splash screen in Android 12. Just now I opened a couple dozen apps and they all had the same color for the notification area as the splash screen. It appears from your post that EMUI must handle the splash screen differently from Android.

[LastMonopoly]

My Huawei phone is using HarmonyOS 3.0, which is compatible with Android 12.

The left one is a normal android app, the right one is my app using flutter_native_splash with fullscreen: true

[LastMonopoly]

Same problem also happens on my Xiaomi, which is of Android 11.

The left one is a normal android app, the right one is my app using flutter_native_splash with fullscreen: true

[jonbhanson]

I don't have a device with HarmonyOS or Xiaomi, so I am not able to test any changes that would improve compatibility on these operating systems.

[LastMonopoly]

@jonbhanson Xiaomi is using Android 11, have you tested on Android 11?

[jonbhanson]

@LastMonopoly this package has been tested extensively with all recent versions of Android. Unfortunately, clones of Android like MIUI don't always work exactly the same as Android. Since I don't have any Xiaomi devices, there is no way for me to determine what needs to be changed to make the splash screen work the same as on Android. But like this example, if an Xiaomi user can tell me what needs to be changed and I can confirm it, I am happy to make changes to accommodate.

[Nathan617]

@jonbhanson I finally found a solution coming from this link :

https://stackoverflow.com/questions/72471785/how-to-change-status-bar-color-of-native-splash-screen-in-flutter

The solution is to go to project / android / app / src / main / res / values-night / styles.xml and to overwrite the <style name="LaunchTheme ... " section with the following code :

 <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             the Flutter engine draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowLightStatusBar">true</item>
    </style>

I now have the full screen during the splash as you can see below:

[LastMonopoly]

@Nathan617 Same result on my Huawei, the trick is
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
and /values-night/styles.xml

[LastMonopoly]

@Nathan617 @jonbhanson
This is my setup to achieve fullscreen, for styles.xml under values and values-night folder,
without <item name="android:windowTranslucentNavigation">true</item>

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
      <!-- Show a splash screen on the activity. Automatically removed when
           the Flutter engine draws its first frame -->
      <item name="android:windowBackground">@drawable/launch_background</item>
      <item name="android:windowDrawsSystemBarBackgrounds">true</item>
      <item name="android:statusBarColor">@android:color/transparent</item>
      <item name="android:windowLightStatusBar">false</item>
      <item name="android:forceDarkAllowed">false</item>
      <item name="android:windowFullscreen">true</item>
      <item name="android:navigationBarColor">#000000</item>
      <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
  </style>

[LastMonopoly]

[Nathan617]

@jonbhanson Maybe something to consider in a further update? :)

[jonbhanson]

@Nathan617 @LastMonopoly thanks for the detective work. I will push out an update that adds the <item name="android:windowDrawsSystemBarBackgrounds">true</item>. Unfortunately I can't test it since I don't have a Xiaomi device, but since you both confirmed the fix I will go ahead with the change to fix this for other Xiaomi users.

[LastMonopoly]

@Nathan617 Thanks a lot for your effort, I will verify it later.

[FairyWorld]

@Nathan617 @jonbhanson This is my setup to achieve fullscreen, for styles.xml under values and values-night folder, 这是我实现全屏的设置，对于 values 和 values-night 文件夹下的 styles.xml ， without <item name="android:windowTranslucentNavigation">true</item>  没有 <item name="android:windowTranslucentNavigation">true</item>

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
      <!-- Show a splash screen on the activity. Automatically removed when
           the Flutter engine draws its first frame -->
      <item name="android:windowBackground">@drawable/launch_background</item>
      <item name="android:windowDrawsSystemBarBackgrounds">true</item>
      <item name="android:statusBarColor">@android:color/transparent</item>
      <item name="android:windowLightStatusBar">false</item>
      <item name="android:forceDarkAllowed">false</item>
      <item name="android:windowFullscreen">true</item>
      <item name="android:navigationBarColor">#000000</item>
      <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
  </style>

I also encountered this problem. I modified styles.xml but it still didn’t work. What is the configuration of your flutter_native_splash.yaml? Can you give me a reference? In addition to modifying styles.xml, is there any other processing required?