flutter - 缺口 BottomAppBar flutter

Question

我刚刚开始使用 flutter，我想创建一个带有 FAB 和缺口的底部应用栏。

我的脚手架代码如下:

return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        color: Colors.blueGrey,
        notchMargin: 2.0,
        clipBehavior: Clip.antiAlias,
        child: BottomNavigationBar(items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.cancel), title: Text("Title")),
          BottomNavigationBarItem(
              icon: Icon(Icons.cancel), title: Text("Title")),
        ]),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );

但是，此代码不显示缺口。它确实对齐 FAB 并在应用栏中显示元素，但没有缺口。

Answer 1

我刚刚运行了您的代码(进行了一些修复)，它在我这边运行良好。您可能希望使用更大的陷波边距来查看效果。

屏幕截图也有助于询问 UI 问题。

这是我的模拟器的截图 Screenshot showing notch