Flutter中如何实现透明BottomSheet？

嘿，我来帮你搞定这个透明BottomSheet的问题！你是不是已经设置了全透明的背景色，但底部sheet还是显示白色？这大概率是几个容易忽略的小细节在作祟，我给你一步步调整：

• 关键补充：加上surfaceTintColor透明属性
  新版本的Flutter中，Material组件新增了surfaceTintColor，哪怕你把backgroundColor设成全透明，这个属性的默认值可能会透出淡淡的底色。所以一定要在BottomSheet里加上：

  surfaceTintColor: Colors.transparent,
  

• 检查MyBottomSheet自身的背景
  别忽略了你自定义的MyBottomSheet组件！如果它的根Widget（比如Container）默认设置了白色背景，那不管外层怎么设透明，显示出来还是白的。记得把MyBottomSheet的根背景也改成透明：

  class MyBottomSheet extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(
        color: Colors.transparent, // 这里必须设为透明
        child: // 你的底部sheet内容
      );
    }
  }
  

• 修改后的完整代码示例
  把你的代码调整后，应该是这样的：

  bottomSheet: BottomSheet(
    elevation: 0,
    backgroundColor: Colors.transparent, // 用Colors.transparent更简洁直观
    surfaceTintColor: Colors.transparent, // 这行是解决白色残留的关键！
    enableDrag: true,
    onClosing: () {},
    builder: (BuildContext contexts) {
      return MyBottomSheet();
    },
  ),
  

要是你之后用的是showModalBottomSheet弹出模态底部sheet，除了上面的设置，还可以加上barrierColor: Colors.transparent来去掉背景遮罩，不过你的场景是Scaffold的bottomSheet，上面的调整应该就能解决问题啦！

内容来源于stack exchange