Black Statusbar on Splashscreen

[ccebrecos]

I'm having the same issue described in the previous #248. With Android I'm finding a black status bar during all the splash screen.

I've used the the option fullscreen: true. But it's still appearing.

Not sure if the notch on the mobile has something to do with that.

I would like the status bar to be removed or, if possible, change its color to be white, that would be enough in my case.

Expected behavior I was expecting the status bar to be removed or, at least, to have the same color as the defined in the background.

Device (please complete the following information):

• Device: OnePlus 7
• OS: Android 11

Flutter doctor [✓] Flutter (Channel stable, 2.10.2, on macOS 12.2.1 21D62 darwin-x64, locale es-ES) • Flutter version 2.10.2 at /Users/ccebrecos/Code/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 097d3313d8 (hace 3 semanas), 2022-02-18 19:33:08 -0600 • Engine revision a83ed0e5e3 • Dart version 2.16.1 • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) • Android SDK at /Users/ccebrecos/Library/Android/sdk • Platform android-32, build-tools 32.1.0-rc1 • Java binary at: /Users/ccebrecos/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/211.7628.21.2111.8139111/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.11.2

[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1) • Android Studio at /Users/ccebrecos/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/211.7628.21.2111.8139111/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2) • IntelliJ at /Users/ccebrecos/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2) • IntelliJ at /Users/ccebrecos/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/213.6777.52/IntelliJ IDEA.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.1) • IntelliJ at /Users/ccebrecos/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/213.6461.79/IntelliJ IDEA.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] Connected device (1 available) • Chrome (web) • chrome • web-javascript • Google Chrome 99.0.4844.51

[✓] HTTP Host Availability • All required HTTP hosts are available

• No issues found!

[jonbhanson]

Can you post your config? Do you have the same problem in an emulated android?

[jonbhanson]

Closing due to no response. Feel free to reopen if you still have a problem.

[ccebrecos]

Sorry for the delay on the response. I'm still having the issue, even using emulators, the one i've used is the Pixel 3 XL with API 30 (because of the middle notch similarities to our issue).

The real devices we've used are:

• OnePlus 7 - android 11.
• Samsung G9700 - android 11 and updated to android 12.

And the config file you asked is reduced to simply:

flutter_native_splash:
  color: "#ffffff"
  image: assets/logo.png
  fullscreen: true

[AhmedLSayed9]

same issue here

[jonbhanson]

I just tried a Pixel 3 XL with API 30, using the example in the package, but modifying it to have the same configuration you listed. Here is what it looks like when I run it:

I don't see the back status bar at the top of the screen. Can you advise how to reproduce?

[AhmedLSayed9]

I've found the reason for this issue in my case:

Reason: The Package apply <item name="android:windowFullscreen">true</item> to values\styles.xml only and I was testing on dark mode.

Solution: Add these lines to values-night\styles.xml manually till it's been fixed by the package:

[ccebrecos]

The solution you propose @AhmedLSayed9 doesn't fix the problem in my case unfortunately.

@jonbhanson, in order to reproduce the issue you need to put the mobile layout so you can see the notch (which I assume is the problem here).

[jonbhanson]

@ccebrecos How do I enable the mobile layout?

[ccebrecos]

Inside the advanced settings for the device, you can see a check box with Device Frame, it has to be checked, and then, you can select the skin that you wish.

[jonbhanson]

@AhmedLSayed9 do you have color_dark or image_dark set in your flutter_native_splash config? Without dark mode enabled, values-night\styles.xml is not modified, but if dark mode is enabled, the lines you indicated should be added if you have full screen enabled.

[AhmedLSayed9]

@AhmedLSayed9 do you have color_dark or image_dark set in your flutter_native_splash config? Without dark mode enabled, values-night\styles.xml is not modified, but if dark mode is enabled, the lines you indicated should be added if you have full screen enabled.

Oh, I've just used color in my config. Isn't it better to use color for both light and dark modes if color_dark isn't set?

[jonbhanson]

@ccebrecos I was only able to reproduce by setting the phone to dark mode. Was your test in dark mode? If you want to configure how the splash appears in dark mode, you need to add dark mode settings to your config.

[jonbhanson]

@AhmedLSayed9 you mean if the dark mode settings are not used, this package should set dark mode settings to the same as light mode?

I have assumed that if the user did not set light mode, there would not be any dark mode styles.xml files in their android app, and android would use only the light mode settings. It sounds like you may have an edge case that I had not considered: you are not setting dark mode, but you do have a dark mode styles.xml for some reason.

[AhmedLSayed9]

Exactly. I have dark mode styles.xml for some other settings but As mentioned in the docs If dark configs are not specified, the app will use the normal color, image etc.. parameters that's why I didn't use color_dark.

[ccebrecos]

My tests weren't in dark mode. The black line over the notch was in such a variety of situations, the most tests I did were in physical devices as mentioned in the initial issue.

OnePlus 7 - android 11. Samsung G9700 - android 11 and updated to android 12.

I've tested also with a Xiaomi Redmi Note 8 and it went good.

[alexlovar]

same problem here, adding the lines as @AhmedLSayed9 says, does not fix the problem. Emulator pixel 4 api 30. Android 11

[jonbhanson]

@ccebrecos @alexlovar I have not been able to reproduce this problem. Can you advise how to run the package's example in a way that reproduces this problem? I tried using the emulator in the mobile layout so the notch can be seen, but didn't have any problem.

[ccebrecos]

@jonbhanson the way to reproduce is the one I mentioned. That looks extremely weird to me as I wasn't able to get it fully working.

All the steps were fully explained and the output I got was the one I placed in the capture as you can see.

[mathiasgodwin]

I'm facing exact problem :(

[zhahouming]

same problem，OnePlus 8Pro

[jonbhanson]

@mathiasgodwin @zhahouming can you advise how to reproduce the problem? As you see above, I've tried to reproduce without success, and without reproducing, it is impossible for me to fix the problem. It seems like the problem may be related to OnePlus phones. @mathiasgodwin are you using a OnePlus phone?

[mathiasgodwin]

@jonbhanson I'm not using a OnePlus phone, I tested it on Infinix Hot 8 Lite and Techno Smart 5 (they both have notches) and the issue surfaced, I tried it on another phone without a notch (Techno POP 2) and there wasn't a black status bar. Could it be the notches causing the issue on the other two phones? and I don't know exactly what to do to reproduce the issue since it's kinda dependent on the device used. Thanks for your time anyway

[ccebrecos]

I've tested with:

• OnePlus 7 - android 11.
• Samsung G9700 - android 11 and updated to android 12.

As I reported previously here. Both with the notch that I assume is the problem.

[zhahouming]

@jonbhanson The problem may not be related to some phone brand. I have reproduced this problem on the real machines of HUAWEI and OPPO, as well as the Pixel3 XL and Nexus 5 simulators.

Steps to reproduce:

# dev environment
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.3, on macOS 12.3.1 21E258 darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.67.0)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

• No issues found!

# device info
Simulator, Nexus 5, API 24, Android 7.0
Simulator, Pixel3 XL, API 30, Android API 30

# 1. create demo
flutter create splash

# 2. add package dependency
flutter_native_splash: ^2.1.6

# 3. settings
flutter_native_splash:
  color: "#ffffff"
  branding: assets/logo.png
  color_dark: "#121212"
  branding_dark: assets/logo.png
  android_12:
    icon_background_color: "#ffffff"
    icon_background_color_dark: "#121212"
  web: false

# 4. Run the package
flutter pub run flutter_native_splash:create

# 5. Run the project
flutter run

Appendix

# pubspec.yaml
name: splash
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: ">=2.16.1 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_native_splash: ^2.1.6
  # flutter_native_splash: ^2.2.0+1

flutter_native_splash:
  color: "#ffffff"
  branding: assets/logo.png
  color_dark: "#121212"
  branding_dark: assets/logo.png
  android_12:
    icon_background_color: "#ffffff"
    icon_background_color_dark: "#121212"
  web: false

assets:
  - assets/logo.png

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.0
flutter:
  uses-material-design: true

# main.dart
import 'package:flutter/material.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Nexus 5

Pixel3 XL

[mrqaidi]

i have this issue on pixel 5 API 30 Dark mode . please help

[skylvsme]

Managed to fix this issue on OnePlus device with camera-notch. Just add this to your styles.xml file: <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

[jonbhanson]

@zhahouming I followed your instructions for reproducing this problem, and this is how the splash screen appeared:

The black bar at the top is removed if I add the following to the pubspec.yaml:

  fullscreen: true

Sorry, everyone who is having this trouble - I have not been able to reproduce the problem. Does the fix from @skylvsme work for resolving this problem?

[ccebrecos]

Yes! In my case what @skylvsme commented solved the issue!

Very thankful!!

[skylvsme]

Sorry, everyone who is having this trouble - I have not been able to reproduce the problem.

Probably it's because you test in on emulator and apply skin of the device to it. I test it on physical device (OnePlus Nord 2) and may be Android somehow detect the notch on the screen and adapt it, when in your case you just apply the skin on the top of running emulator screen.

[jonbhanson]

I will be posting an updated that automatically adds

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

Thanks @skylvsme for the solution and @ccebrecos for verifying!