如何让flutter app在安卓导航栏后面画，让导航栏全透明？

提问者：小点点

如何让flutter app在安卓导航栏后面画，让导航栏全透明？

我想让我的Flutter app在Android中占据整个屏幕，同时仍然同时显示状态栏和导航栏，并且两者都是透明的，以实现iOS中的全面屏外观。

状态栏的颜色可以很容易地改变，但现在我面临的问题是如何让应用程序填满屏幕，同时使导航栏透明。

默认情况下，app根本不会绘制在导航栏下方（我已经将状态栏颜色设置为透明）：

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

解决方案摘自此处：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手动获取状态栏和导航栏高度。此外，这还创建了一个关于应用程序切换器的奇怪bug，如下所示（看看内容是如何跳转的，右上方的调试横幅是如何拉伸的）：

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

结果：

这是最接近我想要达到的目标。mediaquery.of(context).padding.top正确显示顶部填充，而mediaquery.of(context).viewinsets.bottom正确显示navbar的高度。在应用程序切换器中也没有奇怪的bug。唯一的问题是navbar是半透明的，不是透明的。

下面是上面显示的示例应用程序的回购: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

共2个答案

匿名用户

因此，如果您使用Flutter，程序是：

将AppBar()颜色设置为透明。
将extendbeyondappbar设置为true。
将高度设置为0。

例如：

null

    return Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
           elevation: 0,
           )

匿名用户

这可能有些晚了,但flutter的最新版本1.12提供了一个将应用程序绘制在导航栏后面的特性,因此下面的代码将使透明导航栏与应用程序完全扩展到导航栏后面,

Scaffold(
  extendBodyBehindAppBar: true, //this ensures that the body is drawn behind the navigation bar as well
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    title: Text('Transparent Bar'),
  ),
  body: Container(
    color: Colors.blue,
  ),
);