How to make flutter app draw behind android navigation bar and make navigation bar fully transparent?

Question

I would like to make my Flutter app take up the entire screen in Android while still showing both the status bar and the navigation bar, with both of them transparent, to achieve the full screen look like in iOS.

The status bar color can be easily changed, but right now I'm facing problems with getting the app to fill up the screen and making the navigation bar transparent at the same time.

By default, the app is not drawn below the navigation bar at all (I've set the status bar color to be transparent):

Here are some solutions I've tried:

1) Setting flags on window in the onCreate function in MainActivity

Solution taken from here: /sf/answers/2211771481/

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
  window.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, 
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
}

This sort of achieves what I want, but it has several problems. The padding and inset values in MediaQuery are now 0, so I have to manually get the status bar and nav bar heights through the use of MethodChannel. Furthermore, this creates a weird bug regarding the application switcher, as shown below (see how the content jumps and the debug banner on the top right is stretched):

2) Adding translucent navigation in styles.xml

<item name="android:windowTranslucentNavigation">true</item>

Result:

This is the closest to what I want to achieve. MediaQuery.of(context).padding.top correctly shows the top padding, and MediaQuery.of(context).viewInsets.bottom correctly shows the height of the nav bar. There's no weird bugs in the application switcher as well. The only problem is that the nav bar is translucent and not transparent.

Here's the repo for the sample app shown above: https://github.com/CZX123/navbar

It would be nice if Flutter could provide this functionality out of the box. But it doesn't, so are there any other better ways to achieve this?

Update

It seems like we would have to wait for the Flutter team to officially implement this feature:
https://github.com/flutter/flutter/issues/40974
https://github.com/flutter/flutter/issues/34678

This comment also perfectly sums up the current behavior in Android: https://github.com/flutter/flutter/issues/34678#issuecomment-536028077

Answer 1

Flutter 2.5.0之后：

这对我来说就像魅力一样！

在你的里面main()粘贴下面的代码：

//Setting SysemUIOverlay
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemStatusBarContrastEnforced: true,
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: Colors.transparent,
    systemNavigationBarIconBrightness: Brightness.dark,
    statusBarIconBrightness: Brightness.dark)
);
    
//Setting SystmeUIMode
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge, overlays: [SystemUiOverlay.top]);

Answer 2

有一种简单的方法可以在 android SDK 29 及更高版本上使用原生 flutter 来解决此问题，而无需编辑任何其他源文件。

扰流板：而不是Colors.transparent使用任何具有不透明度的颜色0.002。

首先，您需要将其设置SystemUiMode为全屏显示，并在应用程序上呈现状态和导航元素。

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

然后将导航栏的颜色设置setSystemUIOverlayStyle为不透明度为的任何颜色0.002（这是您可以使用的最小值）

  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.black.withOpacity(0.002),
    ),
  );

结果 ：

如果您过于集中注意力，您可能会注意到轻微的颜色差异，但是您可以进一步将导航栏颜色设置为背景颜色，您将不会注意到任何差异。

我在更改应用程序主题时使用全局函数来设置它

void setSystemUIOverlayStyle(final Color color) {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      systemNavigationBarColor: color.withOpacity(0.002),
    ),
  );
}

我不知道透明颜色有什么问题，但如果颜色接近透明，那么一切都会正常工作。

Answer 3

return Scaffold(
   body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent
    ),
    sized: false,
    child: Container(color: Colors.red)
  )
);