停靠式浮动操作按钮（Floating Action Button）按压时显示异常背景形状问题

我帮你排查了下，你这个FAB按压时出现异常背景形状的问题，主要是几个布局和组件使用不当导致的：

• 你给FAB套了Container+FittedBox的组合，这会打乱FAB本身的尺寸计算和触摸反馈逻辑，导致按压效果和外层容器不匹配
• 把Tab组件作为FAB的child是个误区，Tab是专门为TabBar设计的，自带的样式和布局会和FAB的默认行为冲突
• 虽然你设置了透明背景和0 elevation，但FAB默认的按压高亮/水波纹效果还是会基于它的原始圆形尺寸触发，自然就和你想要的矩形容器不搭了

给你两个修复方案，选适合你的就行：

方案1：调整原生FAB的属性（推荐） #

直接简化布局，去掉多余嵌套，修正FAB的按压相关属性：

floatingActionButton: SizedBox(
  height: 80,
  width: 100,
  child: FloatingActionButton(
    onPressed: () => setState(() {_currentIndex=4;}),
    // 直接用Image作为child，去掉多余的Tab组件
    child: Image.asset('images/scan.png'),
    backgroundColor: Colors.transparent,
    elevation: 0,
    // 关键：关闭按压时的elevation提升，避免异常背景
    highlightElevation: 0,
    // 如果不需要水波纹，可以加上这行
    // splashColor: Colors.transparent,
    // 可以自定义形状，比如矩形
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
  ),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

方案2：用RawMaterialButton完全自定义 #

如果原生FAB的限制还是满足不了需求，换成RawMaterialButton会更灵活，它没有FAB的默认圆形限制：

floatingActionButton: SizedBox(
  height: 80,
  width: 100,
  child: RawMaterialButton(
    onPressed: () => setState(() {_currentIndex=4;}),
    child: Image.asset('images/scan.png'),
    fillColor: Colors.transparent,
    elevation: 0,
    highlightElevation: 0,
    // 自定义你想要的任何形状
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
  ),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

试试这两个方案，应该就能解决按压时背景形状异常的问题了～

内容的提问来源于stack exchange，提问作者Siddharth Mehra