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 sh

Answer 1

try this inside showModelBottomSheet

showModalBottomSheet(
        backgroundColor: Colors.transparent,
)

Answer 2

It is very easy, only implement in main:

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

Also, see the image below.

Answer 3

Try this way to archive Transparent theme of Fullscreen Bottom Sheet:

MaterialApp(
   theme: ThemeData(canvasColor: Colors.transparent)
),

And,

showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    barrierColor: Colors.white.withOpacity(0.05),
    builder: (context) => CustomWidget(),
)

Answer 4

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"),
        ),
      ),
    )

Answer 5

BottomSheet use default background color of MaterialType.canvas, so in order to set it to transparent for the whole app you may init MaterialApp like that:

new MaterialApp(
  title: 'Transparent Bottom Bar',
  theme: new ThemeData(
    canvasColor: Colors.transparent
  ),
  home: new YourAppPage()

As an alternative you set it just for one Widget by using Theme widget like that:

@override
Widget build(BuildContext context) {
  return
    Theme(
      data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
      child: ...);