flutter - 如何让flutter应用程序在android导航栏后面绘制并使导航栏完全透明？

Question

我想让我的 Flutter 应用程序占据 Android 中的整个屏幕，同时仍然显示状态栏和导航栏，并且两者都是透明的，以实现像 iOS 中那样的全屏外观。 .

状态栏颜色可以轻松更改，但现在我面临着让应用程序填满屏幕并同时使导航栏透明的问题。

默认情况下，应用程序根本不会绘制在导航栏下方(我已将状态栏颜色设置为透明):

以下是我尝试过的一些解决方案:

1)在MainActivity的onCreate函数中设置窗口标志

从这里获取的解决方案:https://stackoverflow.com/a/31596735

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

这实现了我想要的，但它有几个问题。 MediaQuery 中的填充和插入值现在为 0，因此我必须通过使用 MethodChannel 手动获取状态栏和导航栏高度。此外，这会产生一个关于应用程序切换器的奇怪错误，如下所示(查看内容如何跳转以及右上角的调试横幅如何拉伸(stretch)):

2)在styles.xml中添加半透明导航

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

结果:

这是最接近我想要实现的目标。 MediaQuery.of(context).padding.top 正确显示顶部填充，MediaQuery.of(context).viewInsets.bottom 正确显示导航栏的高度。应用程序切换器中也没有奇怪的错误。唯一的问题是导航栏是半透明的而不是透明的。

这是上面显示的示例应用程序的存储库:https://github.com/CZX123/navbar

如果 Flutter 能够开箱即用地提供此功能，那就太好了。但事实并非如此，那么还有其他更好的方法来实现这一目标吗？

更新

看来我们还得等待 Flutter 团队正式实现这个功能:
https://github.com/flutter/flutter/issues/40974
https://github.com/flutter/flutter/issues/34678

此评论也完美总结了 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]);