How to modify "colorScheme" property while using custom "colors" in FlexThemeData

[Flucadetena]

Hi, I'm using a customtheme where I specify the "colors" property in FlexThemeData. But I want to specify a general color for the "Divider" widget. In M2 I know you change the "diverderColor" and in M3 you change the "outlineVariant", but both properties are inside the colorSheme.

If I change the property in colorsheme all my custom colors are overriden. So how I go about extending my current colorScheme without overriding everything?

Hope I have explained my self more or less. Here I leave the code I have:

This shows my colors correctly but not the divider color is not the one I want:

FlexThemeData.dark(
      colors: const FlexSchemeColor(
        primary: Color(0xffb70071),
        primaryContainer: Color(0xffffd9e5),
        secondary: Color(0xff7a32d6),
        secondaryContainer: Color(0xffeddcff),
        tertiary: Color(0xff03a8c4),
        tertiaryContainer: Color(0xff004e5c),
        appBarColor: Color(0xffeddcff),
        error: Color(0xffcf6679),
      ),
      surfaceMode: FlexSurfaceMode.highSurfaceLowScaffold,
      blendLevel: 10,
      appBarStyle: FlexAppBarStyle.background,
      darkIsTrueBlack: true,
      surfaceTint: const Color(0xffffffff),
      subThemesData: const FlexSubThemesData(
        interactionEffects: false,
        blendOnLevel: 18,
        blendOnColors: false,
        defaultRadius: 8.0,
        textButtonRadius: 8.0,
        textButtonSchemeColor: SchemeColor.onBackground,
        elevatedButtonRadius: 8.0,
        elevatedButtonSchemeColor: SchemeColor.onBackground,
        outlinedButtonRadius: 8.0,
        outlinedButtonSchemeColor: SchemeColor.onBackground,
        toggleButtonsSchemeColor: SchemeColor.primaryContainer,
        switchSchemeColor: SchemeColor.onBackground,
        switchThumbSchemeColor: SchemeColor.onBackground,
        checkboxSchemeColor: SchemeColor.onBackground,
        radioSchemeColor: SchemeColor.onBackground,
        sliderBaseSchemeColor: SchemeColor.onBackground,
        sliderValueTinted: true,
        sliderTrackHeight: 2,
        inputDecoratorSchemeColor: SchemeColor.onBackground,
        inputDecoratorUnfocusedHasBorder: false,
        chipSelectedSchemeColor: SchemeColor.tertiary,
        popupMenuSchemeColor: SchemeColor.surface,
        tooltipSchemeColor: SchemeColor.onSurfaceVariant,
        dialogBackgroundSchemeColor: SchemeColor.surfaceVariant,
        snackBarBackgroundSchemeColor: SchemeColor.surfaceVariant,
        bottomNavigationBarSelectedLabelSchemeColor: SchemeColor.primaryContainer,
        bottomNavigationBarSelectedIconSchemeColor: SchemeColor.primaryContainer,
        bottomNavigationBarBackgroundSchemeColor: SchemeColor.surface,
        navigationBarSelectedLabelSchemeColor: SchemeColor.primaryContainer,
        navigationBarSelectedIconSchemeColor: SchemeColor.primaryContainer,
        navigationBarIndicatorSchemeColor: SchemeColor.primaryContainer,
        navigationBarBackgroundSchemeColor: SchemeColor.surface,
        navigationRailSelectedLabelSchemeColor: SchemeColor.primaryContainer,
        navigationRailSelectedIconSchemeColor: SchemeColor.primaryContainer,
        navigationRailIndicatorSchemeColor: SchemeColor.primaryContainer,
      ),
      useMaterial3ErrorColors: true,
      visualDensity: FlexColorScheme.comfortablePlatformDensity,
      useMaterial3: true,
      // To use the Playground font, add GoogleFonts package and uncomment
      fontFamily: GoogleFonts.poppins().fontFamily,
    );

If I change and add:

   colorScheme: Theme.of(context).colorScheme.copyWith(outlineVariant: Colors.red),

The whole theme colors get override. What can i do?

Thanks a lot for any time and help given.

[rydmike]

Hi @Flucadetena, thanks for your question.

I'm assuming here that you are on Flutter 3.7 and using latest stable 6.1.2 of FCS, or perhaps even latest FCS beta 7.0.0-dev.2. Not that it really matters so much for the proposed solution further below.

From Flutter 3.3 to 3.7 there has been a change in how Divider gets its default color from the surrounding theme and its colorScheme.

In Flutter 3.3 it is:

M2: theme.dividerColor
M3: theme.dividerColor

In Flutter 3.7 it is:

M2: theme.dividerColor
M3: theme.colorScheme.outlineVariant

Where theme is `Theme.of(context)'.

The dividerColor is on a deprecation roadmap in Flutter, see: flutter/flutter#91772

In upcoming FCS V7 and already in above mentioned dev beta release, this change of color source for the Divider is better considered than in 6.x versions and earlier. Additionally an optional toggle where you can continue to use the opacity M2 style based Divider in M3, is available as a quick toggle.

I have not added any property to change the Divider's theme color in FCS v7, mostly because it is simple enough to add it without need for including it in FCS, and because typically the default is reasonable and there is seldom a pressing need to change it.

Still sometimes there is a need to change it. Luckily if you want to set a truly unique custom color on the Divider in Flutter 3.7 and later it is straight forward. And yes to not impact the ColorScheme for the entire app, I recommend just adding it via its own component theme DividerThemeData.

Since FCS in any version only sets the color property in DividerThemeData when you want to use the M2 style in M3 mode, you can easily completely override its component theme with a new one without copying in already existing component theme. This makes it a bit simpler since you don't have to include its context version, you can just add a new one with only the single color set, and any other props you might want to modify in it.

Long story short, if you want a custom color on Divider in your entire app's theme, you can do:

 darkTheme: FlexThemeData.dark(...).copyWith(dividerTheme: DividerThemeData(color: Colors.red)),

This will work in both M2 and M3 mode. Below you can see a red divider in the Themes Playground app when I wrapped its entire theme with above copyWith. Always red, it does not matter what I do else to the theme or which scheme I choose, and I didi not have to change any other color in theme or its ColorScheme to get it set.

M2	M3

If you need a color from the effective FlexColorScheme's ColorScheme, as the color for the custom colored Divider and you don't have a const value for it, since it might be seeded by FCS or computed by it, then you have to extract the ColorScheme from FlexColorScheme first, before you make ThemeData from it, so you can use the color in the copyWith in the Divider theme.

You can do this with FlexColorScheme without context since it is just a data class with functions that can return a ThemeData class, and also its ColorScheme separately that it will include in its returned ThemeData. This FCS QA has some info and related example on how to extract its ColorScheme, so you can use its colors in sub-themes.

This API guide part also show a good example of this: https://docs.flexcolorscheme.com/api_guide#use-flexcolorscheme-or-flexthemedata.

The FCS docs FAQ here https://docs.flexcolorscheme.com/faq#can-i-use-the-colorscheme-flexcolorscheme-creates-in-custom-component-themes also contain info on this topic, as does this FAQ https://docs.flexcolorscheme.com/faq#how-do-i-modify-the-component-themes-with-custom-features, that discuss the steps when you want to override a property in a component theme and keep everything else it as it was, which we do not have to do in this particular DividerThemeData component theme case.

If you are not doing the custom DividerThemeData for the entire app theme, but want it only in some part of your widget tree, then Flutter docs cookbook shows how to do that with Theme, here https://docs.flutter.dev/cookbook/design/themes

With the Divider case it would be:

Theme(
  // Find and extend the parent theme using `copyWith`. See the next
  // section for more info on `Theme.of`.
  data: Theme.of(context).copyWith(dividerTheme: DividerThemeData(color: Colors.red)),
  child: ... // Widget branch with red Dividers
);

Sorry way too long answer, hope it helps and maybe provides some additional useful insights into the wondrous world of Flutter app theming 😃

Cheers!
Mike

[Flucadetena]

Man, I can't thank you enough for the time and the amazing package. I'm still very very lost with all the terms and options of the themes. But this was amazing.

Thank you so much for the fast and very specific response.

Hope you have a great day!

[rydmike]

No problem, and always happy to get feedback and questions from users of FCS. Plus I needed a break from working on V7, still a few more tweaks before I release the last beta 7.0.0-dev.3, after it, there will only tests and quality assurance before I release a stable version of it, no more features, it already had a lot of feature creep.

So many new feature in FCS7 and Flutter 3.7 when it comes to theming.