Using systemNavigationBarDividerColor changes statusBarIconBrightness and systemNavigationBarIconBrightness on Android11
#100027
Comments
|
Reproducible on screenshots
complete code sampleimport 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
final AppBarTheme appBarLight = AppBarTheme(
backgroundColor: Colors.white.withAlpha(0xEE),
foregroundColor: Colors.black,
elevation: 0.5,
systemOverlayStyle: SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.transparent,
),
);
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Annotated Region Issue',
theme: ThemeData.from(colorScheme: const ColorScheme.light())
.copyWith(appBarTheme: appBarLight),
home: const MyHomePage(title: 'Annotated Region Issue'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
final MediaQueryData media = MediaQuery.of(context);
final double topPadding = media.padding.top + kToolbarHeight;
final double bottomPadding = media.padding.bottom;
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
return AnnotatedRegion(
value: SystemUiOverlayStyle(
systemNavigationBarColor: Colors.white.withAlpha(0xBB),
systemNavigationBarDividerColor: Colors.red.withAlpha(0x55),
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarContrastEnforced: false,
),
child: Scaffold(
extendBody: true,
extendBodyBehindAppBar: true,
appBar: AppBar(
title: Text(title),
),
body: GridView.builder(
padding:
EdgeInsets.fromLTRB(10, topPadding + 10, 10, bottomPadding + 10),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
childAspectRatio: 2,
),
itemCount: 100,
itemBuilder: (context, index) => Card(
color: Colors.primaries[index % Colors.primaries.length][800]!,
elevation: 2,
child: Center(
child: Text(
'Tile nr ${index + 1}',
style: const TextStyle(color: Colors.white, fontSize: 16),
),
),
),
),
),
);
}
}
flutter doctor -v |
danagbemava-nc
added
platform-android
|
cc @blasten |
|
I thought this was a regression, but I don't see any changes that affected these code paths during this time window. @camsim99 could you investigate this further since you have been working with status bars recently? |
|
Potentially related to: cc @Piinks |
|
It looks like this is about more than one issue, regarding the android navigation bar color not changing: @camsim99 and I bisected this to a #97883 @camsim99 has more context re: the divider color behavior. To avoid confusion and focus on a solution to each of these issues, they are likely best served as individual bugs. |
|
Ahh, lets revert for now then |
|
revert is #100263 |
|
On the |
|
Thanks @jonahwilliams & @camsim99. From the reproduction, I can also see there are a combination of different system chrome styles being applied, one through the app bar and the other through the annotated region. For each issue listed, a minimal reproduction of code should make it easier to identify each root cause. |
|
This PR should fix the API 30 issue with setting system bar icon brightness on API 30. In terms of the issue with having a translucent navigation bar and setting the divider color, this is due to the underlying Android API we need to use in order to style the system bars, so I will send out a PR to note this in the documentation as @rydmike suggested. |
|
Regarding the system chrome style via the
I find it both a bit confusing and frustrating that if you have an One could argue that this makes sense, since we are defining things for an Imo it would be very convenient in many cases if setting them also worked via the The |
|
Un-assigning myself as I'm not actively working on this. |
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
systemNavigationBarColor: Color(0x0A000000),
)) |
|
I re-tested this with Android versions from 9 to 13. I could no longer reproduce any of the actual issues reported above on Android 9 and 11 in Flutter stable 3.7.7, so I'm closing this issue as fixed and completed. There are other aspect about the AnnotatedRegion and SystemUiOverlayStyle that may still benefit from improvements in usability in documentation, but other issue have or are capturing that. |
- The issue flutter/flutter#100027 behind the divider removal was solved, so it could be enabled again. - Added back a bunch of tests for it. - Improve tinted effects and tinted disabled doc comments - Clean out old TODOs and commented code.
danagbemava-nc
added
the
r: fixed
|
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
Steps to Reproduce
When you use an
AnnotatedRegionto control the design of the system navigation bar on Android thestatusBarIconBrightnessandsystemNavigationBarIconBrightnessunexpectedly change toBrightness.lightif you give any value tosystemNavigationBarDividerColoron Android 11 (SDK30).To see the issue try the provided code sample with different Android SDK API versions.
Reproduction sample code
Actual results
Results from Pixel4XL at shown Android SDK API level using the 3 button system navigation style to make the results more visible. The results are the same with the smaller swipe navigation too, but not as visible.
Expected results
Expected that the system navigation bar icons and status bar icons would have remained dark on Android 11 (SDK 30) as in result from Android 10 (SDK 29) and Android 12 (SDK 31). Surprisingly even the status bar icons change their brightness, even though they are not set in the
SystemUiOverlayStyleused in theAnnotatedRegionat all.Expected that Android 9 (SDK 28) would have gotten a white system navigation bar with opacity. This was expected since the documentation states:
Since Android O, is Android Oreo, version 8.0 (SDK 26), then setting the
systemNavigationBarColorshould have worked also in this case with Android 9 (SDK 28), but as shown it did not change color.Tested Flutter versions
The issue exists in latest Flutter stable 2.10.3 and master channel version shown below:
Flutter doctor from master
System navigation bar divider is a surface layer, not a divider line
If you on Android 10, 11 and 12 set
systemNavigationBarDividerColorto a color with opacity, then the system navigation bar becomes almost opaque and no longer has the opacity defined bysystemNavigationBarColor. As shown here:It seems like the
systemNavigationBarDividerColoris a full layer behind the navigation bar with just a 1dp higher height. We can test this theory with separate colors on divider and the system navigation bar, with both having suitable opacity:Which reveals that this is in fact the case. Here we can see a translucent white surface on the navigation bar, showing the translucent red divider surface behind it, with it reaching about 1dp higher and top part being visible as a red semi transparent line.
To not have any impact from the
systemNavigationBarDividerColoron thesystemNavigationBarColorwith opacity, you have to use fully transparent colorColors.transparenton the divider color.Knowing that the divider color is in fact the color of a full surface behind the system navigation bar that is just 1dp higher than navigation bar area, and not a divider line, is a critical piece of information when dealing with how to use it when using opacity on the system navigation bar background. You can use this knowledge to create a system navigation bar area that has some transparency and a divider, but the transparency will be a sum of both colors and their transparency.
Consider documenting this critical information about the system navigation bar divider.
SystemUiOverlayStyle Documentation
Consider using clearer documentation of what feature is supported on which versions for each property in
SystemUiOverlayStyle.Prefer always stating Android version and SDK API level. Avoid using internal code version letters like "O" and "P", instead prefer saying "Android 8 (SDK 26)" and "Android 10 (SDK 29)".
Avoid using terms like SDK 29+, it is unclear if this means 29 and higher or higher than 29. Fortunately the docs do mention the unambiguous version too, but in some cases with the confusing Android one letter version code. Why include the ambiguous version at all?
Examples:
Related issues
At least these issues touch subjects related to this issue, but are slightly different.
The text was updated successfully, but these errors were encountered: