Flutter悬浮按钮缺口不可见：如何保留渐变背景同时显示缺口？

问题出在你用Stack叠了一个完整矩形的渐变Container，它没有跟随BottomAppBar的缺口做裁剪，所以透过透明的BottomAppBar，底层的矩形会把FAB的缺口挡住。要保留渐变同时显示缺口，只需要把渐变背景放到BottomAppBar的child里，让BottomAppBar的shape裁剪作用到渐变背景上就行。

修改后的代码如下：

floatingActionButton: FloatingActionButton(
  backgroundColor: Colors.black87,
  onPressed: () {},
  child: const Icon(
    Icons.camera_alt,
    color: Colors.white,
  ),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
  elevation: 0,
  color: Colors.transparent,
  shape: CircularNotchedRectangle(),
  notchMargin: 5,
  child: Container(
    height: 48,
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [
          Color(0XFFFF1C2A),
          Color(0XFFFF4F5A),
        ],
      ),
    ),
    child: Padding(
      padding: EdgeInsets.only(left: 25, right: 25),
      // 这里放置你原来的导航栏内容
    ),
  ),
)

原理说明 #

• 移除原来的Stack布局，将渐变Container作为BottomAppBar的直接子元素
• BottomAppBar的shape属性会对整个子元素区域进行裁剪，渐变背景会随BottomAppBar一起出现缺口
• 保持BottomAppBar的color为透明，让渐变背景完整显示，同时缺口区域被裁剪，不会遮挡FAB的位置

内容的提问来源于stack exchange，提问作者Mr Fin