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

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?

Solution

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