Flutter中悬浮底部导航栏与FAB的UI适配实现求助

我需要在Flutter的部分页面实现悬浮底部导航栏和**悬浮操作按钮（FAB）**的组合UI，目标效果是：FAB悬浮在底部导航栏的中间位置，底部导航栏对应位置有缺口适配FAB，整体呈现一体化的悬浮样式。

当前我已实现了基础的FAB和底部导航栏，但两者是分离状态，没有达到目标的融合效果。以下是我的当前实现代码：

floatingActionButton: InkWell(
  onTap: (){
    log('Action Button Tapped');
  },
  child: Stack(
    alignment: Alignment(0,-0.2),
      children:[
        SvgPicture.asset('assets/svg/floating_button.svg'),
        SvgPicture.asset('assets/svg/floating_button_icon.svg'),
      ]),
),

bottomNavigationBar: Container(
  color: Colors.transparent,
  padding: EdgeInsets.only(bottom: 30,left: 15, right: 15),
  child: ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(25)),
    child: Material(
      elevation: 100.0,
      child: Container(
        height: 55,
       color: Colors.black12.withOpacity(0.15),
       child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SvgPicture.asset('assets/svg/colored_home_icon.svg'),
                SizedBox(
                  height: 1.5,
                ),
                Text('Home', style: GoogleFonts.outfit(
                  color: AppColors.primaryGreen,
                  fontSize: AppFontSize.s12
                ),)
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SvgPicture.asset('assets/svg/grey_transfer_icon.svg'),
                SizedBox(
                  height: 1.5,
                ),
                Text('Transactions', style: GoogleFonts.outfit(
                    color: AppColors.homeDullText,
                    fontSize: AppFontSize.s12
                ),)
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SvgPicture.asset('assets/svg/grey_more_icon.svg'),
                SizedBox(
                  height: 1.5,
                ),
                Text('More', style: GoogleFonts.outfit(
                    color: AppColors.homeDullText,
                    fontSize: AppFontSize.s12
                ),)
              ],
            ),
          ],
        ),
      ),
    ),
  ),
),

当前效果是FAB独立于底部导航栏上方，导航栏中间没有缺口，和目标UI不符，需要调整代码实现目标效果。

调整方案及代码示例 #

要实现目标效果，需要从FAB定位、底部导航栏布局两个核心点修改：

1. 设置FAB的定位：使用floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked，让FAB停靠在底部导航栏的中间位置。
2. 修改底部导航栏布局：将导航栏的Row改为MainAxisAlignment.spaceBetween，中间添加占位的SizedBox，宽度与FAB匹配以留出缺口；同时调整导航栏的顶部内边距，让FAB能部分覆盖导航栏。
3. 调整导航栏的高度：适当提高导航栏高度，适配FAB的覆盖区域，保证视觉协调。

修改后的完整代码如下：

// Scaffold的相关属性
floatingActionButton: InkWell(
  onTap: () {
    log('Action Button Tapped');
  },
  child: Stack(
    alignment: Alignment(0, -0.2),
    children: [
      SvgPicture.asset('assets/svg/floating_button.svg'),
      SvgPicture.asset('assets/svg/floating_button_icon.svg'),
    ],
  ),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // 关键：设置FAB定位
bottomNavigationBar: Container(
  color: Colors.transparent,
  padding: EdgeInsets.only(bottom: 30, left: 15, right: 15, top: 10), // 增加top padding，给FAB留出覆盖空间
  child: ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(25)),
    child: Material(
      elevation: 100.0,
      child: Container(
        height: 65, // 适当提高导航栏高度，适配FAB覆盖
        color: Colors.black12.withOpacity(0.15),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween, // 改为spaceBetween，左右对齐
          children: [
            // 左侧导航项
            Padding(
              padding: EdgeInsets.only(left: 20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SvgPicture.asset('assets/svg/colored_home_icon.svg'),
                  SizedBox(height: 1.5),
                  Text('Home', style: GoogleFonts.outfit(
                    color: AppColors.primaryGreen,
                    fontSize: AppFontSize.s12
                  ),)
                ],
              ),
            ),
            // 中间占位，适配FAB宽度
            SizedBox(width: 60), // 宽度根据你的FAB实际大小调整
            // 中间导航项
            Padding(
              padding: EdgeInsets.only(right: 20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SvgPicture.asset('assets/svg/grey_transfer_icon.svg'),
                  SizedBox(height: 1.5),
                  Text('Transactions', style: GoogleFonts.outfit(
                    color: AppColors.homeDullText,
                    fontSize: AppFontSize.s12
                  ),)
                ],
              ),
            ),
            // 右侧导航项
            Padding(
              padding: EdgeInsets.only(right: 20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SvgPicture.asset('assets/svg/grey_more_icon.svg'),
                  SizedBox(height: 1.5),
                  Text('More', style: GoogleFonts.outfit(
                    color: AppColors.homeDullText,
                    fontSize: AppFontSize.s12
                  ),)
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ),
),

额外说明 #

• 如果需要导航栏中间有弧形缺口，可以用CustomClipper自定义裁剪路径替换ClipRRect，实现与FAB弧度匹配的缺口。
• 调整SizedBox(width: 60)的宽度，确保和你的FAB实际宽度一致，保证视觉对齐。

内容的提问来源于stack exchange，提问作者DOMINIC DANIEL