Flutter:- show BottomSheet transparency
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"),
),
),
)
It is very easy, only implement in main:
bottomSheetTheme: BottomSheetThemeData(
backgroundColor: Colors.black.withOpacity(0)),
Also, see the image below.