I tried to make the bottom sheet look transparent when open it, and it did work at first. But then when I set the background color of the main page to something else, the bottom sheet no longer looks transparent when open it again.

Here’s my implementation:

class HomePage extends StatefulWidget {
  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",
            )
        ),
      ),
    );
  }
}