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

Question

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?

Answer 1

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