Change BottomSheet backgroundColor (Modifying component theme properties not currently supported by FlexColorScheme)

[superakabo]

Please I'd like to know how to change the background color of a modal bottom sheet using FlexSubThemesData.
The only properties I could find are bottomSheetRadius, bottomSheetElevation and bottomSheetModalElevation.

[rydmike]

Hi @superakabo,

Thank you for your question. You are right there is no built-in option in current version of FCS to set its background color directly. FCS does not try to replace everything you can do with ThemeData, trying to replace everything is not really the goal, it focuses on things that are tedious or tricky to do.

A key thing to remember is that FlexColorScheme.toTheme or FlexThemeData.light/dark just return a fancy configuration of standard ThemeData. You can get and store this ThemeData data object and further modify it anyway you want with copyWith on the returned ThemeData, before you apply it as the theme in your MaterialApp.

This is explained and shown here too: #41 (comment)
With shadowColor in AppBar as an example.

It would be equivalent to do it for the BottomSheet. If you need to use any of the existing values it has via FCS and do the copyWith on the BottomSheetThemeData you obtain FCS, or if you just override them all with a new BottomSheetThemeData is up to you. If you are using a custom border radius globally or on BottomsSheet directly, you may want to use the BottomSheetThemeData you get from FCS as a base for the copyWith in order to not have to recreate that, as is shown in the linked AppBar example.

---

All this said, it is of course much more convenient when key props like this can be set directly in FCS too. I might be adding this and few other colors in some minor step release before next major release.

---

A bit off topic and background talk

Mostly I see BottomSheet a bit as Drawer, that whatever color it has via its default Material and elevation should be the most common use case and good UI design should not really diverge from it.

In Material 2 that means it is background color with elevation, and in dark mode it also gets elevation overlay (making it lighter with higher elevation) if background color is equal to surface color in ThemeData.colorScheme (which it is by default, but FCS can make themes where it is not) and dark elevation overlay is enabled in ThemeData.

In Material3 it should both in light and dark mode get ThemeData.colorScheme.surfaceTint (that defaults to ThemeData.colorScheme.primary) elevation level based color tint (an alpha blend), so tint (alpha blend) increases in strength with higher elevation. This automatically separates things like drawers and bottoms sheets in Material3 from the background. A nice automatic effect you get when you use the defaults. Sadly this particular Material3 feature is not yet available in Flutter 3.3, maybe the next stable version has it, I hope so.

Meanwhile yes, giving it some color that separates it a bit from the background is often needed. In FCS when you use surface blends, and a blend mode where surface, background and scaffoldBackground all have a bit different blend strength relation to each other, it accomplishes this automatically in both M2 and M3 mode as well. Still those blends are not everybody's cup of tea, so a custom color may be needed and called for for the BottomSheet, I get that 😄

Just out of curiosity, are you using a completely custom color for it, ie something not in the app's ThemeData.colorScheme or some color from the ColorScheme?

Just thinking that this might be a case that if I add support for it, it would be nice to be able to do both, quick pick a ColorScheme color, but also use a completely custom color if so desired.

Mostly I tend to only offer what you have in the ColorScheme as options, since the UI should not suddenly really diverge from what is in it, but it would of course be possible to also offer any color as an option.

---

I'm marking this as answered, but if you need more guidance, don't hesitate to follow with more questions in the comments.

[superakabo]

Hi @rydmike,
Thanks for the clarification. I'll make the necessary changes to my theme data.
To provide a bit of context, I want my modal bottom sheet to have the same background color as that of my Scaffold.
I am using AnnotatedRegion as shown below to set the color of the system navigation bar to white/black depending on the theme so that the Scaffold and SystemNavigationBar won't look seamless on some android devices without using the SystemNavigationBar divider.

AnnotatedRegion<SystemUiOverlayStyle>(
      value: FlexColorScheme.themedSystemNavigationBar(context),
      child: Scaffold(...)
)

To be honest, I had a little bit of difficulty using the FlexColorScheme themes playground to automatically generate colors for the various containers and so I used the tool from https://m3.material.io/theme-builder#/custom to generate the color schemes and applied theme to FlexColorScheme like this

class Themes {
  static ThemeData light(BuildContext context) {
    return FlexThemeData.light(
      colorScheme: lightColorScheme,
      surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
      visualDensity: FlexColorScheme.comfortablePlatformDensity,
      blendLevel: 5,
      appBarOpacity: 0.95,
      appBarStyle: FlexAppBarStyle.background,
      subThemesData: const FlexSubThemesData(
        blendOnLevel: 5,
        blendOnColors: false,
      ),
    );
  }

  static ThemeData dark(BuildContext context) {
    return FlexThemeData.dark(
      colorScheme: darkColorScheme,
      surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
      visualDensity: FlexColorScheme.comfortablePlatformDensity,
      blendLevel: 10,
      appBarOpacity: 0.90,
      appBarStyle: FlexAppBarStyle.background,
      subThemesData: const FlexSubThemesData(
        blendOnLevel: 20,
      ),
    );
  }
}


const lightColorScheme = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xFF00658E),
  onPrimary: Color(0xFFFFFFFF),
  primaryContainer: Color(0xFFC7E7FF),
  onPrimaryContainer: Color(0xFF001E2E),
  secondary: Color(0xFF006398),
  onSecondary: Color(0xFFFFFFFF),
  secondaryContainer: Color(0xFFCCE5FF),
  onSecondaryContainer: Color(0xFF001D31),
  tertiary: Color(0xFF006684),
  onTertiary: Color(0xFFFFFFFF),
  tertiaryContainer: Color(0xFFBDE9FF),
  onTertiaryContainer: Color(0xFF001F2A),
  error: Color(0xFFBA1A1A),
  errorContainer: Color(0xFFFFDAD6),
  onError: Color(0xFFFFFFFF),
  onErrorContainer: Color(0xFF410002),
  background: Color(0xFFF6FEFF),
  onBackground: Color(0xFF001F24),
  surface: Color(0xFFF6FEFF),
  onSurface: Color(0xFF001F24),
  surfaceVariant: Color(0xFFDDE3EA),
  onSurfaceVariant: Color(0xFF41484D),
  outline: Color(0xFF71787E),
  onInverseSurface: Color(0xFFD0F8FF),
  inverseSurface: Color(0xFF00363D),
  inversePrimary: Color(0xFF83CFFF),
  shadow: Color(0xFF000000),
  surfaceTint: Color(0xFF00658E),
);

const darkColorScheme = ColorScheme(
  brightness: Brightness.dark,
  primary: Color(0xFF83CFFF),
  onPrimary: Color(0xFF00344C),
  primaryContainer: Color(0xFF004C6C),
  onPrimaryContainer: Color(0xFFC7E7FF),
  secondary: Color(0xFF93CCFF),
  onSecondary: Color(0xFF003351),
  secondaryContainer: Color(0xFF004B73),
  onSecondaryContainer: Color(0xFFCCE5FF),
  tertiary: Color(0xFF66D3FF),
  onTertiary: Color(0xFF003546),
  tertiaryContainer: Color(0xFF004D64),
  onTertiaryContainer: Color(0xFFBDE9FF),
  error: Color(0xFFFFB4AB),
  errorContainer: Color(0xFF93000A),
  onError: Color(0xFF690005),
  onErrorContainer: Color(0xFFFFDAD6),
  background: Color(0xFF001F24),
  onBackground: Color(0xFF97F0FF),
  surface: Color(0xFF001F24),
  onSurface: Color(0xFF97F0FF),
  surfaceVariant: Color(0xFF41484D),
  onSurfaceVariant: Color(0xFFC1C7CE),
  outline: Color(0xFF8B9198),
  onInverseSurface: Color(0xFF001F24),
  inverseSurface: Color(0xFF97F0FF),
  inversePrimary: Color(0xFF00658E),
  shadow: Color(0xFF000000),
  surfaceTint: Color(0xFF83CFFF),
);

[rydmike]

Hi @superakabo nice work with the themes 👍🏻

Yes being able to provide a custom ColorScheme like you did is intended exactly for the purpose when you want to use a custom scheme made with other tools or by a designer.

I took a look at your theme by putting it into the copy paste playground, where it is easy to see what it looks like on "all" widgets.

They look nice and will work well in Material2 mode. Material3 expects a certain relation between some of the colors that are not present in this theme. It may cause issues with the look on some widgets in M3 mode down the road. It might not either, since it is very nice single color "blue" shades theme, I lok those and use them too for their simplicity and nice compatibility with expected/common iOS look that use less colors than M2 and M3.

Just for fun I can show you later how you could produce this theme or at least something very similar to it, with Themes Playground, but that is not so important now.

Let's get to the background color of the bottom sheet. Here is how I would do it. These are just plain data classes and we have all the data we need without the context, so need to pass it. There are situations where you may need it of course. I commented in the simple code below what is going on:

class Themes {
  static ThemeData light() {
    // Make the FlexColorScheme object, it is just a data object
    final FlexColorScheme flexScheme = FlexColorScheme.light(
      colorScheme: lightColorScheme,
      surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
      visualDensity: FlexColorScheme.comfortablePlatformDensity,
      blendLevel: 5,
      appBarOpacity: 0.95,
      appBarStyle: FlexAppBarStyle.background,
      subThemesData: const FlexSubThemesData(
        blendOnLevel: 5,
        blendOnColors: false,
      ),
    );
    // We can extract the color scheme it defines, you passed in a given
    // ColorScheme, that is fine and what it is for, bur surface colors in
    // effective one will be modified by defined blend settings, we can extract it
    // and use its effective colors in custom component themes.
    final ColorScheme colorScheme = flexScheme.toScheme;
    // We can also make the themeData from it. It is easier to manipulate any
    // component themes it hava already defined if we get the ThemeData it
    // defines first.
    final ThemeData flexTheme = flexScheme.toTheme;
    // Now we can use copyWith to adjust the bottomSheetThemeData it already
    // defined, and we can use the colors from the colorScheme it makes or
    // any of the direct computed color values in ThemeData too.
    return flexTheme.copyWith(
      bottomSheetTheme: flexTheme.bottomSheetTheme.copyWith(
        // For effective colorScheme background
        backgroundColor: colorScheme.background,
        // For scaffold background color. It is not the same in your theme.
        // Beware that scaffoldBackgroundColor will be deprecated soon
        // in Flutter, there will be a theme replacing it and FCS will set the
        // color in it instead when it gets deprecated in ThemeData.
        // backgroundColor: flexTheme.scaffoldBackgroundColor,
      ),
    );
  }

  static ThemeData dark() {
    final FlexColorScheme flexScheme = FlexColorScheme.dark(
      colorScheme: darkColorScheme,
      surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
      visualDensity: FlexColorScheme.comfortablePlatformDensity,
      blendLevel: 10,
      appBarOpacity: 0.90,
      appBarStyle: FlexAppBarStyle.background,
      subThemesData: const FlexSubThemesData(
        blendOnLevel: 20,
      ),
    );
    final ColorScheme colorScheme = flexScheme.toScheme;
    final ThemeData flexTheme = flexScheme.toTheme;
    return flexTheme.copyWith(
      bottomSheetTheme: flexTheme.bottomSheetTheme.copyWith(
        backgroundColor: colorScheme.background,
        // backgroundColor: flexTheme.scaffoldBackgroundColor,
      ),
    );
  }
}

Note that your theme scaffoldBackgroundColor and colorScheme.background colors are different with the blend settings you used.

For example in dark mode with colorScheme.background you get this for your bottom sheet.

and with scaffoldBackgroundColor this:

---

Regarding AnnotatedRegion and static helper FlexColorScheme.themedSystemNavigationBar, notice that it has a systemNavBarStyle where you can define which of the surface, background or scaffoldBackground colors it should use. You can also use transparent

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: FlexColorScheme.themedSystemNavigationBar(
        context,
        systemNavBarStyle: FlexSystemNavBarStyle.transparent,
      ),
    child: Scaffold(),

It offers a nice full screen experience on Android:

And also integrates well with whatever color you use on your bottom navbar, or when bottom sheet comes up.

---

Hope this helps further!

BR Mike

[rydmike]

I will add the scheme based colors as selectable in Playground for the bottom sheet background, and I can probably include the effective ThemeData.scaffoldBackground color in it as well. It will probably be in 6.1.0. with some other minor new features.

Considering all things that have landed in master channel on Flutter last week, I think next version of Flutter will bring M3 support to the level where it usable in production. But it probably needs again a minor breaking release to FCS, so much is changing and be added to Flutter that I suspect it is unavoidable.

From M3 point of view Flutter 3.3 feels a bit rushed, they wanted it out before Vikings for the marketing attention, but a few weeks later would have brought so many more usable M3 features into it. Now those will wait 3...4 months, unless they do a quicker 3.5 release relatively soon, but I doubt it.

[superakabo]

@rydmike Thank you.