How to change the background color of BottomSheet in Flutter?

Question

When I use the showModalBottomSheet method to pop up a bottomSheet, how to make the background color transparent. because I needed the rounded corners, I knew that changing the canvasColor in the materialApp would do the trick, but other widgets would also change colors.

I tried to embed it in the theme, but it didn't work

showModalBottomSheet < Null > (context: context, builder: (BuildContext context) {
    return Theme(
        data: Theme.of(context).copyWith(canvasColor: Colors.orange),
        child: Material(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0)),
            child: Container(
                color: Colors.purple,
            ),
        ),
    );
});

I think it's working, just that the purple content fills the whole material. Try adding some margin to the Container or don't set a color for the Container. — Günter Zöchbauer, Jul 06 '18 at 07:03
I've tried it. If don't set the Container's color,it will fill by orange color that specified by this statement "data: Theme.of(context).copyWith(canvasColor: Colors.orange)",but the default white background color is still there — disburden, Jul 06 '18 at 08:26
What default white background do you mean? If you set rounded corners, then this is probably the background from behind the material thats visible outside the rounded corners. — Günter Zöchbauer, Jul 06 '18 at 08:34
It's a white background cut off by the corners, Is the canvasColor defined in the theme attribute of the MaterialApp I can't change the color here — disburden, Jul 06 '18 at 09:32
What I want is to get rid of the white background on two rounded corners on the left and right — disburden, Jul 06 '18 at 09:34
But that comes from behind the material. You need to set the color of the widget behind. You can for example wrap the `Material` in a `Container` and set the color there or whatever is behind the modal bottom sheet. — Günter Zöchbauer, Jul 06 '18 at 09:45
You mean only change the background color by adding a container,right? That's not going to do what I want. I want the corners to be transparent — disburden, Jul 07 '18 at 02:09

score 34 · Accepted Answer · answered Jul 05 '19 at 12:04

34

Just add this in your top level ThemeData. This will solve your problem

bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.black54)

answered Jul 05 '19 at 12:04

Owais

482
4
5

3

`backgroundColor:` should be `Colors.transparent` because the underlying Color (`barrierColor`) is already `Colors.black54` – LP Square Jun 03 '20 at 09:03
1

it's rather the `modalBackgroundColor` property that should be changed in this instance (if being presented modally). – Andy Shephard Nov 12 '20 at 14:06

Nahuel Cabrera · Answer 2 · 2018-10-03T10:32:11.750

Hello friend, today you're in luck. If you want to change the color of a BottomSheet, add the following code in the theme used by MaterialApp of the Main method.

I suggest you change this canvas color in a ThemeData widget that wraps the fab

As you will see the color of the canvas is who handles what you are looking for

  ThemeData _baseTheme = ThemeData(
   fontFamily: "Roboto",
   canvasColor: Colors.transparent,
  );

  class MyApp extends StatelessWidget
  {
   @override
   Widget build(BuildContext context) {

  return new MaterialApp(
  routes: myRoutes(),
  initialRoute: '/',
  debugShowCheckedModeBanner: false,
  theme: _baseTheme,
  title: 'My awesome app!',
 );

 }
}

The OP said "changing the canvasColor in the materialApp would do the trick, **but other widgets would also change colors**"... meaning it is not an option because he had already used the original color throughout the app. — Giraldi, Mar 19 '19 at 20:28

score 6 · Answer 3 · answered Oct 24 '19 at 11:47

use backgroundColor property to change the color. To change the shape use shape property of showModalBottomSheet or apply shape_of_view container to manage shape.

showModalBottomSheet(
        elevation: 0,
        context: context,
        backgroundColor: Colors.transparent,
        clipBehavior: Clip.hardEdge,
        builder: (BuildContext bc) {
          return ShapeOfView(
              shape: ArcShape(
                  direction: ArcDirection.Outside,
                  height: 20,
                  position: ArcPosition.Top),
              child: Container(
                  color: Colors.white,
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
                    child: Container(
                      color: Colors.pink,
                      height:50

                    ),
                  )));
        });

score 2 · Answer 4 · answered Jul 24 '18 at 15:50

Theme is not worked here.Widget rendered after background-color.You can set the Container color to Colors.black54.

I don't think this is a good solution for this problem , but it works .

Sorry for my poor english!

This url will help you! https://gist.github.com/slightfoot/5af4c5dfa52194a3f8577bf83af2e391

score 2 · Answer 5 · answered Jun 23 '20 at 14:29

You just need to put backgroundColor: Colors.yourColor Example code is below

 showModalBottomSheet(
    context: context,
    backgroundColor: Colors.transparent,
    builder: (BuildContext bc){
      return Container(
        height: 430,
        child: BottomSheetWidget(name, test, images),
      );
    }
);

Thanks

score 1 · Answer 6 · answered Apr 19 '21 at 05:56

I solved it by wrapping widget in a theme and changing canvas color and background color to transparent and filling a color in bottom sheet container. `

 GestureDetector(onTap: () => showModalBottomSheet(
                                backgroundColor: Colors.transparent,
                                context: context,
                                builder: (BuildContext contxt) => Theme(
                                      data: Theme.of(context).copyWith(
                                        canvasColor: Colors.transparent,
                                      ),
                                      child: Container(
                                        decoration: BoxDecoration(
                                            color: Colors.white,
                                            borderRadius: BorderRadius.only(
                                                topRight: Radius.circular(20),
                                                topLeft: Radius.circular(20))),
                                        height: 360,
                                        child: ChildWidgetOfBottomSheetYouWantToImplement.....

`

How to change the background color of BottomSheet in Flutter?

6 Answers6

Linked