-
Notifications
You must be signed in to change notification settings - Fork 29.8k
Description
First of all thanks for the great Flutter toolkit if you'll have some follow up questions to the issue, I'll be glad to answer.
Steps to Reproduce
The example app is available here: https://github.com/jacek-marchwicki/flutter-insets-bug
Changes to the example project that are necessary to reproduce the issue: jacek-marchwicki/flutter-insets-bug@f23e6d8
Diff
Index: lib/main.dart
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- lib/main.dart (revision d3362aabdefa74cc479fc50b8994f00b57b230a8)
+++ lib/main.dart (date 1597401415000)
@@ -72,6 +72,25 @@
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
+ bottomNavigationBar: BottomNavigationBar(
+ items: const <BottomNavigationBarItem>[
+ BottomNavigationBarItem(
+ icon: Icon(Icons.home),
+ title: Text('Home'),
+ ),
+ BottomNavigationBarItem(
+ icon: Icon(Icons.business),
+ title: Text('Business'),
+ ),
+ BottomNavigationBarItem(
+ icon: Icon(Icons.school),
+ title: Text('School'),
+ ),
+ ],
+ currentIndex: 0,
+ selectedItemColor: Colors.amber[800],
+ onTap: (_) {},
+ ),
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
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 1597397196000)
@@ -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
-
We need to check if insets are updated correctly, In the example I'm using BottomNavigationBar but we could also use SafeArea to reproduce the same issue.
Findings
After debugging I found out that Android sets Window.viewInsets.bottom to the height of the navigation bar.
The different is on iOS where Window.viewInsets.bottom is set to 0, but the height of the navigation bar is set in Window.padding.bottom and Window.padding.viewPadding. By looking through the window documentation and the following video looks like the iOS implementation is correct.
Workaround
I've created a widget that does workaround the issue: jacek-marchwicki/flutter-insets-bug@f5eb07a#diff-fe53fad46868a294b309fc85ed138997R143-R168
With the fix, the app looks correctly:
| Gesture navigation | standard 3 buttons navigation |
|---|---|
![]() |
![]() |
Logs
Logs
flutter run --verbose results:
flutter analyze results:
Analyzing insets_test...
No issues found! (ran in 6.6s)





