Flutter BottomAppBar浮动操作按钮凹口/插图不透明

我在materialApp中的脚手架中添加了一个

BottomAppBar

，并在此基础上添加了一个中间带有插图的fab。代码看起来有点像这样

Scaffold(
    bottomNavigationBar: BottomAppBar(
        color: Theme.of(context).accentColor,
        shape: CircularNotchedRectangle(),
        child: _buildBottomBar(context),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        child: Center(
        child: Icon(
            Icons.add,
            size: 32.0,
        ),
        ),
        onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => CreateEvent()),
        );
        },
    ),
)

这就是我在渲染后得到的结果：

缺口是不透明的，其背后的内容正在被隐藏

---

有办法解决这个问题吗？我可能遗漏了什么？

问题是，如果您将内容放在

Scaffold

的

主体

中，它不会与

应用程序条

，

底部应用程序条

的大小重叠

您可以尝试使用

堆栈

，将身体作为第一个孩子，然后放置

脚手架

，将

背景色

更改为透明

        @override
          Widget build(BuildContext context) {
            return Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Image.network(
                      "https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350"),
                ),
                Scaffold(
                  backgroundColor: Colors.transparent,
                  bottomNavigationBar: BottomAppBar(
                    color: Theme.of(context).accentColor,
                    shape: CircularNotchedRectangle(),
                    child: Row(
                      children: <Widget>[
                        IconButton(
                          icon: Icon(Icons.access_alarm),
                          onPressed: () => null,
                        ),
                        IconButton(
                          icon: Icon(Icons.sms_failed),
                          onPressed: () => null,
                        ),
                      ],
                    ),
                  ),
                  floatingActionButtonLocation:
                      FloatingActionButtonLocation.centerDocked,
                  floatingActionButton: FloatingActionButton(
                    backgroundColor: Theme.of(context).primaryColor,
                    child: Center(
                      child: Icon(
                        Icons.add,
                        size: 32.0,
                      ),
                    ),
                    onPressed: () {
                      /*
                    Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => CreateEvent()),
                    );*/
                    },
                  ),
                ),
              ],
            ); 

@覆盖
小部件构建（构建上下文）{
返回堆栈(
儿童：[
对齐(
对齐：对齐.bottomCenter，
孩子：Image.network(
"https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350"),
),
脚手架(
背景颜色：颜色。透明，
bottomNavigationBar:BottomAppBar(
颜色：主题。背景。强调颜色，
形状：CircularNotchedRectangle（），
孩子：排(
儿童：[
图标按钮(
图标：图标（图标访问报警），
onPressed:（）=>null，
),
图标按钮(
图标：图标（Icons.sms_失败），
onPressed:（）=>null，
),
],
),
),
浮动操作按钮位置：
浮动ActionButtonLocation.centerDocked，
浮动操作按钮：浮动操作按钮(
背景色：主题。背景色，
儿童：中心(
子：图标(
Icons.add，
尺寸：32.0，
),
),
已按下：（）{
/*
导航器。推(
上下文
MaterialPage路由（生成器：（上下文）=>CreateEvent（）），
);*/
},
),
),
],
); 

您只需进入颤振通道：主控，然后添加到脚手架：

Scaffold(
   extendBody: true
);

而且应该是透明的：）

问候

钢筋

更新：

---

您不需要在主频道上。它包含在所有位置：）

我还可以通过将resizeToAvoidBottomInset标志设置为false来实现所需的行为

@override
Widget build(BuildContext context) {

    return Scaffold(
        extendBody: true,
        resizeToAvoidBottomInset: false,
        body: IndexedStack(
            children: <Widget>[],
            index: _selectedTab,
        ),
        bottomNavigationBar: ClipRRect(
            clipBehavior: Clip.antiAlias,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16.0),
                topRight: Radius.circular(16.0)
            ),
            child: BottomNavigationBar(
                backgroundColor: Colors.white,
                elevation: 10,
                type: BottomNavigationBarType.fixed,
                items: <BottomNavigationBarItem>[],
                currentIndex: _selectedTab,
            ),
        ),
    );
}

@覆盖
小部件构建（构建上下文）{
返回脚手架(
扩展体：是的，
resizeToAvoidBottomInset:false，
正文：IndexedStack(
儿童：[]，
索引：_selectedTab，
),
底部导航栏：ClipRRect(
clipBehavior:Clip.antiAlias，
borderRadius：仅限borderRadius(
左上：半径。圆形（16.0），
右上角：半径。圆形（16.0）
),
子项：底部导航栏(
背景颜色：Colors.white，
标高：10，
类型：BottomNavigationBarType.fixed，
项目：[]，
currentIndex:_selectedTab，
),
),
);
}

---

编辑：请记住，您可能需要使用MediaQuery手动设置底部插图。of（context）

是您的“内容隐藏”吗指定为

Scaffold

的

body

参数？是的，body保存了所有内容，基本上是图像和文本的列表视图。我建议提出一个问题。这似乎是布局问题，body没有放在底部栏后面。哦，太糟糕了。我以为我做错了。@RémiRousselet有一个开放的问题->我不推荐这种方式，但我只是想知道它为什么会发生是的，所以我尝试了这个，这需要实际的身体有一个手动设置的主题，滚动成为一个问题。我可能会坚持原来的，现在希望有一个解决方案。这是已经开放的Github问题：是的，等等因为人们不想在master上发布，所以我的应用程序正在生产中，所以需要一个稳定的Flitter版本。它在master上已经有一段时间了，所以希望下一个版本有这个。