Flutter Question posted in
The official Flutter documentation can be found here.

Why is the background color of a BottomSheet not equal to the set color in Flutter with Material 3?

I´m using Material 3 and open a BottomSheet as follows:

showModalBottomSheet(
   context: context,
   backgroundColor: Colors.white,
   ...

However, the background isn´t 100% white – it looks like it´s mixed up a little bit with the primary color of the theme. If I add elements inside the BottomSheet and set their background color to Colors.white they are shown as expected (and therefore you can see a difference to the color of the BottomSheet).

Same thing if I try to use the theme colors (e.g. Theme.of(context).colorScheme.background) – the color differs from other elements inside the bottomsheet with the same color specification.

Is there any other configuration or setting so that the BottomSheet gets the set color?

Tags:

2

Answers


  1. 0

    use surfaceTintColor

    showModalBottomSheet(
       context: context,
       backgroundColor: Colors.white,
       surfaceTintColor :Colors.white,
       ..........
    Login or Signup to reply.
  2. 0

    If you want to set up your colors using themes. You can use set the surfaceTintColor in BottomSheetThemeData:

     MaterialApp(
        home: MyApp(),
        theme: ThemeData(
          useMaterial3: true,
          bottomSheetTheme: BottomSheetThemeData(
            // backgroundColor: Colors.white, --> optional if you want to change the background color
            surfaceTintColor: Colors.white,
          ),
        ),
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search