Open marlonmp opened 2 years ago
maheshj01
commented
2 years ago Hi @marlonmp, Thanks for filing the issue. I am not sure I understand the issue, Can you please share the expected behavior? I tried the below code sample and it seems to set the status bar color correctly
marlonmp
commented
2 years ago Hi @maheshmnj.
Thank you so much for your help.
Here is another example.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({ super.key });
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
// here I set statusBar and systemNavigationBar color to white
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarBrightness: Brightness.dark,
statusBarIconBrightness: Brightness.dark,
statusBarColor: Colors.white, // white
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.white, // white
),
);
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
alignment: Alignment.center,
child: const Text( 'some text' ),
),
),
);
}
}In the above code I set statusBarColor and systemNavigationBarColor to white and I get this.
| Final result | Expected result |
|---|---|
| My app | Google play store app (example image) |
 |
 |
| navigation bar black | navigation bar white |
In my app the systemNavigationBar color is black, but I set it to white.
maheshj01
commented
2 years ago @marlonmp Can you please try upgrading to latest stable 3.0.5? Running your code sample I get the desired result
marlonmp
commented
2 years ago @maheshmnj I upgrated flutter to latest stable but get same result.
$ flutter doctor -v
[✓] Flutter (Channel stable, 3.0.5, on Manjaro Linux 5.10.133-1-MANJARO, locale
es_CO.utf8)
• Flutter version 3.0.5 at /home/marlon/Downloads/Repos/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision f1875d570e (hace 3 semanas), 2022-07-13 11:24:16 -0700
• Engine revision e85ea0e79c
• Dart version 2.17.6
• DevTools version 2.12.2
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /home/marlon/.android
• Platform android-32, build-tools 32.0.0
• ANDROID_HOME = /home/marlon/.android
• Java binary at: /usr/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.16+8)
• All Android licenses accepted.
[✗] Chrome - develop for the web (Cannot find Chrome executable at
google-chrome)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Linux toolchain - develop for Linux desktop
• clang version 14.0.6
• cmake version 3.23.2
• ninja version 1.11.0
• pkg-config version 1.8.0
[!] Android Studio (not installed)
• Android Studio not found; download from
https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/linux#android-setup
for detailed instructions).
[✓] VS Code
• VS Code at /snap/code/current
• Flutter extension version 3.46.0
[✓] Connected device (2 available)
• Redmi Note 8 (mobile) • 12730032 • android-arm64 • Android 11 (API 30)
• Linux (desktop) • linux • linux-x64 • Manjaro Linux
5.10.133-1-MANJARO
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 2 categories.Thanks for the update @marlonmp, I am unable to reproduce the issue, I am able to set statusBarColor and systemNavigationBarColor, But statusBarIconBrightness and systemNavigationBarIconBrightness doesn't seem to work verified on Xiaomi k20 pro (Android 11).
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarBrightness: Brightness.dark,
statusBarIconBrightness: Brightness.dark,
statusBarColor: Colors.blue, // works
systemNavigationBarIconBrightness: Brightness.light,
systemNavigationBarColor: Colors.blue, // works
),
);| Blue color | White Color |
|---|---|
 |
 |
zanderso
commented
2 years ago cc @jonahwilliams
jonahwilliams
commented
2 years ago There is a lot of behavior in https://github.com/flutter/engine/blob/c617fd74c9f2f6ac16aa89bbeaffa392b376c8eb/shell/platform/android/io/flutter/plugin/platform/PlatformPlugin.java#L375-L466 that I don't see documented on the flutter side. We should probably clarify this a bit, because the combinations support here are hard for me to understand at a glance
farhanabdmusa
commented
1 year ago Hello @maheshmnj, when i'm in light mode, that code work perfectly, systemNavigationBarColor: Colors.white is working
But when i switch to dark mode, that white color turn to black on Redmi Note 8 Pro
i've tried to force using light mode
return AnnotatedRegion<SystemUiOverlayStyle>(
value: const SystemUiOverlayStyle(
statusBarBrightness: Brightness.dark,
statusBarIconBrightness: Brightness.dark,
statusBarColor: Colors.white, // works on light mode
systemNavigationBarIconBrightness: Brightness.light,
systemNavigationBarColor: Colors.white, // works on light mode
),
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'App Title',
themeMode: ThemeMode.light,
theme: ThemeData(
fontFamily: 'PlusJakartaSans',
),
home: const HomePage(),
),
);I've try on emulator when in dark mode and light mode, navigation bar colors is still white But when using my device Xiaomi Redmi Note 8 Pro, navigation bar colors turn to black
here is my flutter doctor -v
[✓] Flutter (Channel stable, 3.7.7, on macOS 13.2.1 22D68 darwin-x64, locale en-ID)
• Flutter version 3.7.7 on channel stable at /Users/farhanabdurrahmanmusa/Development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 2ad6cd72c0 (2 days ago), 2023-03-08 09:41:59 -0800
• Engine revision 1837b5be5f
• Dart version 2.19.4
• DevTools version 2.20.1
DongXuanLei
commented
1 year ago Hello @maheshmnj, when i'm in light mode, that code work perfectly,
systemNavigationBarColor: Colors.whiteis working But when i switch to dark mode, that white color turn to black on Redmi Note 8 Proi've tried to force using light mode
return AnnotatedRegion<SystemUiOverlayStyle>( value: const SystemUiOverlayStyle( statusBarBrightness: Brightness.dark, statusBarIconBrightness: Brightness.dark, statusBarColor: Colors.white, // works on light mode systemNavigationBarIconBrightness: Brightness.light, systemNavigationBarColor: Colors.white, // works on light mode ), child: MaterialApp( debugShowCheckedModeBanner: false, title: 'App Title', themeMode: ThemeMode.light, theme: ThemeData( fontFamily: 'PlusJakartaSans', ), home: const HomePage(), ), );I've try on emulator when in dark mode and light mode, navigation bar colors is still white But when using my device Xiaomi Redmi Note 8 Pro, navigation bar colors turn to black
here is my
flutter doctor -v[✓] Flutter (Channel stable, 3.7.7, on macOS 13.2.1 22D68 darwin-x64, locale en-ID) • Flutter version 3.7.7 on channel stable at /Users/farhanabdurrahmanmusa/Development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 2ad6cd72c0 (2 days ago), 2023-03-08 09:41:59 -0800 • Engine revision 1837b5be5f • Dart version 2.19.4 • DevTools version 2.20.1
I have this problem too.
Steps to Reproduce
flutter runon the code sampleExpected results:
Actual results:
Code sample
```dart import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatefulWidget { const MyApp({ super.key }); @override MyAppState createState() => MyAppState(); } class MyAppState extends StateLogs
``` $ flutter run --verbose ... [ +3 ms] Flutter run key commands. [ +2 ms] r Hot reload. 🔥🔥🔥 [ +1 ms] R Hot restart. [ ] h List all available interactive commands. [ ] d Detach (terminate "flutter run" but leave application running). [ ] c Clear the screen [ ] q Quit (terminate the application on the device). [ +3 ms] 💪 Running with sound null safety 💪 [ +1 ms] An Observatory debugger and profiler on Redmi Note 8 is available at: http://127.0.0.1:39071/Wz4H_F6EEX8=/ [ +879 ms] The Flutter DevTools debugger and profiler on Redmi Note 8 is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:39071/Wz4H_F6EEX8=/ [ +160 ms] E/LB (14795): fail to open file: No such file or directory [+7992 ms] V/MiuiFrameworkFactory(14795): get AllImpl object = android.common.MiuiFrameworkFactoryImpl@f8c57c5 [ ] W/MirrorManager(14795): this model don't Support ``` ``` $ flutter analyze Analyzing app... No issues found! (ran in 3.1s) ``` ``` $ flutter doctor -v [✓] Flutter (Channel stable, 3.0.0, on Manjaro Linux 5.10.133-1-MANJARO, locale es_CO.utf8) • Flutter version 3.0.0 at /home/marlon/Downloads/Repos/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision ee4e09cce0 (hace 3 meses), 2022-05-09 16:45:18 -0700 • Engine revision d1b9a6938a • Dart version 2.17.0 • DevTools version 2.12.2 Checking Android licenses is taking an unexpectedly long time...[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) • Android SDK at /home/marlon/.android • Platform android-32, build-tools 32.0.0 • ANDROID_HOME = /home/marlon/.android • Java binary at: /usr/bin/java • Java version OpenJDK Runtime Environment (build 11.0.16+8) • All Android licenses accepted. [✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome) ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable. [✓] Linux toolchain - develop for Linux desktop • clang version 14.0.6 • cmake version 3.23.2 • ninja version 1.11.0 • pkg-config version 1.8.0 [!] Android Studio (not installed) • Android Studio not found; download from https://developer.android.com/studio/index.html (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions). [✓] VS Code • VS Code at /snap/code/current • Flutter extension version 3.46.0 [✓] Connected device (2 available) • Redmi Note 8 (mobile) • 12730032 • android-arm64 • Android 11 (API 30) • Linux (desktop) • linux • linux-x64 • Manjaro Linux 5.10.133-1-MANJARO [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 2 categories. ```