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,
            ),
        ),
    );
});

Answer 1

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

bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.black54)

Answer 2

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!',
 );

 }
}

Answer 3

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

                    ),
                  )));
        });