Android - systemNavigationBarColor is taken from the incorrect place of the screen #66429
Description
Steps to Reproduce
The example app is available here: https://github.com/jacek-marchwicki/flutter-insets-bug2
Changes to the example project that are necessary to reproduce the issue: jacek-marchwicki/flutter-insets-bug2@74e17ed
Diff
Change in main.dart:
@override
Widget build(BuildContext context) {
final style = SystemUiOverlayStyle.light;
return Column(
children: [
Flexible(
child: AnnotatedRegion<SystemUiOverlayStyle>(
value: style.copyWith(
statusBarColor: Colors.redAccent,
systemNavigationBarColor: Colors.redAccent,
),
child: Container(color: Colors.red),
),
),
Flexible(
child: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light.copyWith(
statusBarColor: Colors.greenAccent,
systemNavigationBarColor: Colors.greenAccent,
),
child: Container(color: Colors.green),
),
),
Flexible(
child: AnnotatedRegion<SystemUiOverlayStyle>(
value: style.copyWith(
statusBarColor: Colors.blueAccent,
systemNavigationBarColor: Colors.blueAccent,
),
child: Container(color: Colors.blue),
),
),
],
);
}Index: android/app/src/main/kotlin/com/example/insetstest/MainActivity.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- android/app/src/main/kotlin/com/example/insetstest/MainActivity.kt (revision d3362aabdefa74cc479fc50b8994f00b57b230a8)
+++ android/app/src/main/kotlin/com/example/insetstest/MainActivity.kt (date 1600790219000)
@@ -1,7 +1,17 @@
package com.example.insetstest
+import android.graphics.Color
+import android.os.Build
+import android.view.View
import io.flutter.embedding.android.FlutterActivity
-class MainActivity : FlutterActivity() {
-
+class MainActivity: FlutterActivity() {
+ override fun onWindowFocusChanged(hasFocus: Boolean) {
+ super.onWindowFocusChanged(hasFocus)
+ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+ window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
+ window.navigationBarColor = Color.TRANSPARENT
+ window.statusBarColor = Color.TRANSPARENT
+ }
+ }
}
-
We need to enable transparent navigation bar. According to (the Android documentation: https://developer.android.com/training/gestures/gesturenav) we need to set:
window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_LAYOUT_STABLE window.navigationBarColor = Color.TRANSPARENT window.statusBarColor = Color.TRANSPARENT
-
Let's split the screen with Column widget with three even containers with different background colors and all wrapped with UI AnnotatedRegion widget with
systemNavigationBarColor. Every looks like this with different colors:Flexible( child: AnnotatedRegion<SystemUiOverlayStyle>( value: SystemUiOverlayStyle.light.copyWith( statusBarColor: Colors.greenAccent, systemNavigationBarColor: Colors.greenAccent, ), child: Container(color: Colors.green), ), ), ```
-
Run the code on an Android device with API level >= 29
Expected results:
OS Navigation Bar background color should change to the color according to the lowest AnnotatedRegion.
Actual results:
OS Navigation Bar background color changes to the color according to the middleAnnotatedRegion.
| Actual result | Expected result |
|---|---|
 |
 |
Findings
Looks like I found the origin of the issue.
In flutter view.dart, lines 259-286 I see something like this:
final Offset bottom = Offset(bounds.center.dx, bounds.center.dy - _window.padding.bottom / _window.devicePixelRatio);
// ...
SystemUiOverlayStyle lowerOverlayStyle;
// ...
lowerOverlayStyle = layer.find<SystemUiOverlayStyle>(bottom);
// ...
final SystemUiOverlayStyle overlayStyle = SystemUiOverlayStyle(
// ...
systemNavigationBarColor: lowerOverlayStyle?.systemNavigationBarColor,
// ...
);
SystemChrome.setSystemUIOverlayStyle(overlayStyle);So looks like the
Looks like bounds.center.dy - _window.padding.bottom / _window.devicePixelRatio is incorrect, because instead of bounds.center we should use bounds.bottom.
When I change the code to bounds.bottom - 1.0 - _window.padding.bottom / _window.devicePixelRatio the app behaves correctly.
Btw: I also think / _window.devicePixelRatio isn't necessary here because everything is calculated in physical device pixels, so we don't need to adjust this value.
Logs
Logs
Probably useless, but flutter run --verbose:
out.txt
Flutter Analyze:
Analyzing flutter-insets-bug2...
No issues found! (ran in 7.4s)
Flutter doctor:
flutter doctor -v
[✓] Flutter (Channel beta, 1.20.0, on Mac OS X 10.15.6 19G2021, locale en-GB)
• Flutter version 1.20.0 at /Users/jacek/bin/flutter
• Framework revision 916c3ac648 (8 weeks ago), 2020-08-01 09:01:12 -0700
• Engine revision d6ee1499c2
• Dart version 2.9.0 (build 2.9.0-21.10.beta)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /Users/jacek/Library/Android/sdk
• Platform android-29, build-tools 29.0.2
• ANDROID_HOME = /Users/jacek/Library/Android/sdk
• Java binary at: /Users/jacek/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/201.6823847/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 12.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.0, Build version 12A7209
• CocoaPods version 1.9.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 3.6)
• Android Studio at /Applications/Android Studio 3.5.app/Contents
• Flutter plugin version 45.1.1
• Dart plugin version 192.7761
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
[!] Android Studio (version 4.1)
• Android Studio at /Users/jacek/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/201.6823847/Android Studio.app/Contents
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
[✓] Android Studio (version 4.0)
• Android Studio at /Users/jacek/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6626763/Android Studio.app/Contents
• Flutter plugin version 46.0.2
• Dart plugin version 193.7361
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
[✓] Connected device (3 available)
• Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 85.0.4183.102
! Doctor found issues in 1 category.
Related issues:
- Android 10 incorrect insets when navigation bar is translucent #63761
- SystemChrome setSystemUIOverlayStyle failed #59130
- Overstretching SliverAppBar causes navigation bar color to reset #65626
- Having an AppBar in Scaffold prevents NavigationBar and StatusBar style from changing #61149
- [Android 10] Unable to set transparent navigation bar #40974
- systemNavigationBarIconBrightness: Brightness.dark resets to light onResume. #21265