设置主页面背景色后Flutter底部弹窗透明效果失效求助

原本想实现底部弹窗打开时的透明效果，起初效果正常，但给主页面设置背景色后，弹窗的透明效果不再生效。

现有代码 #

class HomePage extends Stateful Widget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(80, 75, 60, 10),
      body: Center(
        child: ElevatedButton(
            onPressed: () {
              showCupertinoModalBottomSheet(
                barrierColor: Colors.transparent,
                expand: false,
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(
                      top: Radius.circular(100.0)),
                ),
                context: context,
                builder: (BuildContext context) {
                  return CustomizedBottomSheet();
                }
              );
            },
            child: const Text(
              "open me",
            )
        ),
      ),
    );
  }
}

当前界面（未打开弹窗） #

期望效果 #

希望修改代码实现打开底部弹窗时的玻璃态透明效果：

解决方案 #

1. 修正主页面背景色的alpha值问题

你设置的Color.fromRGBO(80, 75, 60, 10)存在错误：RGBO的alpha通道取值范围是0-1，输入10会被自动修正为不透明（1.0），导致弹窗无法透过背景显示透明效果。将其改为正确的alpha值，比如要半透明可以设0.5，不透明则设1.0：

backgroundColor: Color.fromRGBO(80, 75, 60, 1.0),

2. 给弹窗添加玻璃态效果

要实现玻璃态，需要结合BackdropFilter（模糊背景）和半透明容器，修改CustomizedBottomSheet的实现：

首先导入dart:ui包：

import 'dart:ui';

然后编写弹窗代码：

class CustomizedBottomSheet extends StatelessWidget {
  const CustomizedBottomSheet({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300, // 自定义弹窗高度
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.3), // 半透明白色背景
        borderRadius: const BorderRadius.vertical(top: Radius.circular(100)),
      ),
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), // 模糊强度，可自行调整
        child: const Center(
          child: Text("玻璃态弹窗内容"),
        ),
      ),
    );
  }
}

3. 保留弹窗的barrier透明设置

showCupertinoModalBottomSheet中的barrierColor: Colors.transparent可以保留，这样弹窗后方的主页面能完整显示，配合模糊效果实现玻璃态质感。

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