Flutter 3.24中BottomSheet按钮白色阴影/底色去除方案求助

升级到Flutter 3.24.5稳定版后，在Scaffold的bottomSheet中使用FloatingActionButton.extended时，即便设置elevation: 0，按钮周围仍会出现白色阴影/底色，无法实现透明效果。以下是几种可行的解决办法：

方案1：调整FAB核心属性消除白色区域 #

Flutter 3.24.x版本的Material 3设计更新中，FloatingActionButton新增了surfaceTintColor属性，这是导致白色底色的关键。同时需要关闭所有相关的elevation属性：

FloatingActionButton.extended(
  onPressed: () {},
  elevation: 0,
  highlightElevation: 0, // 关闭按下状态的阴影
  hoverElevation: 0,     // 关闭hover状态的阴影（适配桌面端）
  surfaceTintColor: Colors.transparent, // 移除表面色调底色
  backgroundColor: Colors.blue, // 可根据需求设置，或设为Colors.transparent实现全透明
  label: const Text("Next"),
),

方案2：自定义按钮替代FAB #

如果FAB的默认样式限制过多，直接用自定义按钮实现完全可控的外观：

InkWell(
  onTap: () {},
  borderRadius: BorderRadius.circular(30), // 模拟FAB的圆角样式
  child: Container(
    width: double.infinity,
    padding: const EdgeInsets.symmetric(vertical: 16),
    alignment: Alignment.center,
    child: const Text(
      "Next",
      style: TextStyle(fontSize: 16, color: Colors.white),
    ),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(30),
    ),
  ),
)

方案3：修正bottomSheet容器样式 #

确保bottomSheet的外层容器背景透明，避免默认样式干扰：

bottomSheet: Container(
  color: Colors.transparent, // 设置bottomSheet容器为透明
  padding: const EdgeInsets.all(12.0),
  child: FloatingActionButton.extended(
    onPressed: () {},
    elevation: 0,
    surfaceTintColor: Colors.transparent,
    label: const Text("Next"),
  ),
),

内容的提问来源于stack exchange，提问作者M Al