底部导航栏中的一个洞，里面有一个 fab - flutter

Question

使用 flutter，如何在底部导航栏中创建一个洞并将 fab 放入其中，如下图所示

我试过用填充包裹 fab，增加顶部填充以将其向下移动并增加缺口边距，但底部导航栏看起来不像我想要的那样。

FAb 代码：

Padding(
    padding: const EdgeInsets.only(top: 90),
    child: FloatingActionButton(...)
)

底部导航条码：

BottomAppBar(
    elevation: 0,
    color: Colors.transparent,
    shape: const CircularNotchedRectangle(),
    clipBehavior: Clip.antiAlias,
    notchMargin: 50.0,
    child: SizedBox(...)
)

这是我想要的样子

Answer 1

我正在使用 Stack 在 UI 上绘图。玩转小部件的大小、位置和颜色。

运行在 dartPad

bottomNavigationBar: LayoutBuilder(
  builder: (context, constraints) => SizedBox(
    width: constraints.maxWidth,
    height: kToolbarHeight,
    child: Stack(
      children: [
        Positioned.fill(
          child: Container(
            color: Colors.white,
          ),
        ),

        /// middle fab
        Positioned(
          bottom: -20,
          top: -20,
          left: 0,
          right: 0,
          child: Container(
            height: kToolbarHeight * 1.5,
            width: kToolbarHeight * 1.5,
            decoration: BoxDecoration(
              color: Theme.of(context).scaffoldBackgroundColor,
              // Colors.deepPurple,

              shape: BoxShape.circle,
            ),
          ),
        ),

        Align(
          alignment: Alignment.center,
          child: Container(
            width: kToolbarHeight * .8,
            height: kToolbarHeight * .8,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
              color: Colors.amber,
              shape: BoxShape.circle,
            ),
            child: const Text("A"),
          ),
        )
      ],
    ),
  ),
),

底部导航栏中的一个洞，里面有一个 fab - flutter

A hole in bottom nav bar with a fab inside it - flutter

flutter

floating-action-button

flutter-bottomnavigation