How to set Container colors?

[zyllus17]

I am trying to set Container colors as lighter shade of black for dark mode and white for dark mode, but primaryContainer property is not working for it.

[rydmike]

Hi @zyllus17 and thanks for your question,

Despite its name, ColorScheme.primaryContainer is not a color used as light or dark color background for Flutter's Container widget by default in any way.

Here is what the Material 3 guide says about the usage of primaryContainer color:
"Primary container is applied to elements needing less emphasis than primary". To learn more about what that means see https://m3.material.io/styles/color/the-color-system/color-roles

The Container widget does not have a themed Color property or even a default Color, so it cannot be affected by ThemeData at all, and thus not by FlexColorScheme either that returns ThemeData. Container is typically used as lower level building block.

You can of course use the theme dependent color primaryContainer, or any other ColorScheme color, as a color in a custom widget using a Container as its background or decoration color, e.g. like so:

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).colorScheme.primaryContainer,
      child: MyWidget(),
    );
  }

However, for the usage you describe, you may want to consider using Material or Card as a container to get tinted containers that depend 4 different ColorScheme colors. They act a bit differently if you use Material 2 or Material 3 mode. The colors they use from ColorScheme are:

• ColorScheme.background
• ColorScheme.surface
• ColorScheme.surfaceTint
• ColorScheme.shadow

Plus elevation.

Here is a Card example:

        Card(
          elevation: 4,
          surfaceTintColor: colorScheme.surfaceTint,
          shadowColor: Colors.transparent, // remove to get shadow
          child: const SizedBox(
            height: 50,
            child: Center(child: Text('Card, elevation 4, no shadow')),
          ),
        ),

Card is themeable, so you can change the default colors it uses if so desired.

Card will look like this in light mode:

And card in Dark mode:

If not using M3, then Card only gets a grey overlay, no primary color tint:

Unforuntalty there is only color/shade tint effect on Cards in dark mode for M2, light mode always uses ColorScheme.surface with no computational elevation color shift. M3 adds color tint also in light mode if tint color is specified.

---

Using Material is quite similar, but it cannot be themed and must have the shadow color applied in M3 style to get any shadow at all, plus its background color will depend on what type of material is used, one uses background and the other one surface. They are often the same color in most default themes, but FlexColorScheme produces themes where they can differ, then they can get different styles:

        Material(
          type: MaterialType.card,
          elevation: 4,
          surfaceTintColor: colorScheme.surfaceTint,
          shadowColor: colorScheme.shadow,
          child: const SizedBox(
            height: 50,
            child: Center(
                child: Text('Material type card, elevation 4, '
                    'with shadow')),
          ),
        ),

It will look like this, in light M3 mode:

And like this in M2 light, here the canvas type has a different background tint, since it depends on the background color, instead of surface color, by default and FCS has assigned background a slight primary tint.

For dark M3 mode we get this:

And for dark M2 mode this:

Where the canvas type gets not grey elevation tint since it has color that differs from surface and only surface colored material gets the elevation grey effect. The canvas type does however have its own background color based tint, making it distinct from the background.

---

The above is actually only Flutter and ThemeData normal behavior, and has nothing really to do with FlexColorScheme, that can only do its magic based on what ThemeData can do.

---

Hope this answers your question, if not please let me know if I can clarify further. I'm going to transfer this to an discussion as a question, as it is more of general theming question than issue.

[zyllus17]

I am sorry I didn't replied earlier but I read it as soon I got the answer and I am really in awe with the amazing answer you have provided. Instead of just telling me it's not possible as color doesn't get applied to Container by default, you actually explained everything in such a great way, you basically wrote an article for my doubt. This shows you created the package with a lot of love and you truly care so much about the community who uses such an amazing package. Junior devs like me are truly grateful for having such amazing people in the community.
Coming to the theming of Container, I ended up using the Theme Extension provided by Flutter. Thanks for providing the property in the package, it gave me a clean separation of code and made my code cleaner instead of having to use the extension property in the MaterialApp.

[rydmike]

Thanks, and nice to hear that you found the answer helpful and more importantly that you found a way to get the result you were looking for via ThemeExtensions.

ThemeExtensions are really useful for extra colors and other properties for custom widgets that needs colors and styles that don't fit into the general theme and its component themes. You can also use multiple ThemeExtensions, to separate them for different purposes.

In this tweet and its thread I list some general theming guidance https://twitter.com/RydMike/status/1570424178846871559?t=AXygbsyFPLfjrraWnPU1mw&s=19 including theme extensions.

In my recent Flutter Vikings talk I cover a lot of general theming advice. Find the talk and slides here https://rydmike.com/blog_vikings_2022_talk, sadly the streamed video is very poor quality, an edited and easier to watch version is in the works by Vikings organizers, should be available in October.