-
Notifications
You must be signed in to change notification settings - Fork 214
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Black Statusbar on Splashscreen #311
Comments
Can you post your config? Do you have the same problem in an emulated android? |
Closing due to no response. Feel free to reopen if you still have a problem. |
Sorry for the delay on the response. The real devices we've used are:
And the config file you asked is reduced to simply: flutter_native_splash:
color: "#ffffff"
image: assets/logo.png
fullscreen: true |
same issue here |
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). |
@ccebrecos How do I enable the mobile layout? |
@AhmedLSayed9 do you have |
Oh, I've just used |
@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. |
@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 |
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 |
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. I've tested also with a Xiaomi Redmi Note 8 and it went good. |
same problem here, adding the lines as @AhmedLSayed9 says, does not fix the problem. Emulator pixel 4 api 30. Android 11 |
@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. |
@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. |
I'm facing exact problem :( |
same problem,OnePlus 8Pro |
@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? |
@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 |
I've tested with:
As I reported previously here. |
@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),
),
);
}
} |
i have this issue on pixel 5 API 30 Dark mode . please help |
Managed to fix this issue on OnePlus device with camera-notch. |
@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 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? |
Yes! In my case what @skylvsme commented solved the issue! Very thankful!! |
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. |
I will be posting an updated that automatically adds <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> Thanks @skylvsme for the solution and @ccebrecos for verifying! |
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):
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!
The text was updated successfully, but these errors were encountered: