Flutter:- show BottomSheet transparency

Question

I want to open a showBottomSheet. here is my code which working fine, I am able to open ButtomSheet, but it's not giving transparency effect. that I could see behind of this sheet, even I also tried with Opacity which also not working.

 showBottomSheet(
            context: context,
            builder: (context) {
              return Opacity(
                opacity: .1,
                child: Container(
                  height: 400.0,
                  color: Colors.transparent,
                ),
              );
            });

Answer 1

It is very easy, only implement in main:

bottomSheetTheme: BottomSheetThemeData(
            backgroundColor: Colors.black.withOpacity(0)),

Also, see the image below.

Answer 2

I also faced that annoying thing, I tried many things, many ideas etc. The most easy way for me its just setting the barrierColor: Colors.black.withAlpha(1), and it so stupid. .withAlpha(1) his range is from 0 to 255, so when you setting it as 1, the barrierColor accept that, just it is so small number that you cannot see the color XD.

My current flutter version is: Channel master, v1.15.1-pre.35

So this is the complete example:

showModalBottomSheet(
      context: context,
      elevation: 0,
      barrierColor: Colors.black.withAlpha(1),
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
        height: _height * 0.45,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: const Radius.circular(50.0),
            topRight: const Radius.circular(50.0),
          ),
        ),
        child: Center(
          child: Text("Modal content goes here"),
        ),
      ),
    )