ElevatedButton: Foreground and background color when using Material3 has changed from version 5 to version 6.

[abdelaziz-mahdy]

darkTheme: FlexThemeData.dark(
scheme: FlexScheme.deepBlue,
surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
blendLevel: 40,
darkIsTrueBlack: true,
subThemesData: const FlexSubThemesData(
blendTextTheme: false,
),
visualDensity: FlexColorScheme.comfortablePlatformDensity,
useMaterial3: true,
// To use the playground font, add GoogleFonts package and uncomment
// fontFamily: GoogleFonts.notoSans().fontFamily,
),

[abdelaziz-mahdy]

on version 5 it was working

on version 6 its tainted

i dont know if its a bug or that was the intended usage

and if its intended how can i make it not tainted

[rydmike]

Hi @zezo357 and thanks for your correct observation.

I see now that I missed describing this properly in the change log. It is in there but a bit messy and split into parts. I have not yet had time to properly update and included the docs site to cover all changes in version 6.0.0. But I will make sure to mention this properly when I do. I got hit with Covid after Flutter Vikings, so I've had a bit low energy to update the docs. No worries, the Covid is quite mild so far, like a flu, hope it remains so.

---

ElevatedButton M3 Story

Here is the story about the ElevatedButton default style.

Version 6.0.0 moved many default opinionated FCS styles closer to actual M3 styles when opting in on M3.

In Version 5, the ElevatedButton with your settings (another color used though) looked like this in Material 2:

(You can still run v5 Themes Playground to check https://rydmike.com/flexcolorscheme/themesplayground-v5)

And in Version 5, with Material 3, like this:

So the same, like you said.

---

In Version 6.0.0 in Material 2 mode it is still the same as this is expected default color in Material 2 for the ElevatedButton.

However, Version 6 does move towards defaulting the ElevatedButton to in M3 mode use the M3 elevation tinted surface colored background, thus enabling it gives you this by default:

You can customize it to use the previous style if you like:

Or with surface colored foreground text if you prefer that:

The foreground and background color for elevated button in M2 and M3 are practically reversed and elevated button gets elevation based tint on the surface colored background. When you swap M2/M3 mode in FCS, colors remain as they were, but their foreground/background roles are swapped. This is indicated in Themes Playground UI too.

This is just M3 design. I don't think it works so well either. It looks fine in light theme mode:

But it is not as good with some colors in dark mode, so you can set it back to be as it was before, for dark mode only and keep the "real" M3 style in light mode, where it kind of works.

I moved the M3 FCS button defaults closer to actual M3 default theme now that it is supported in Flutter. I also did this to provide room for the new FilledButton and FilledButton.tonal that will land in next Flutter stable release. I had hoped they would land in flutter 3.3.0 so I could include them in FCS 6.0.0, but no such luck.

They are basically two different flat buttons, but with two variations on the color style used by the ElevatedButton in M2. I think for many buttons in M3, they will be nicer than the ElevatedButton.

flutter/flutter#107382

---

About using M3 mode though, you should be aware that it still has severe elevation issues in Flutter 3.3.0 and 3.3.1 that I can't do much about in FCS either:

flutter/flutter#107190

There is a partial fix in master channel:

flutter/flutter#110624

and rest of the fixes for it will have to wait until specific widgets support it, biggest issue after the fix in master is PopupMenuButton.

All the elevation issues will be fixed of course when all widgets implement their M3 style correctly, but that might still take some time.

[rydmike]

Not sure this answered your question properly, but I hope it explains it to some extent and that you are able to define the style you want with v6.0.0 too.

[abdelaziz-mahdy]

Hope you are doing well and recover quickly ❤️

Thank you for the explanation of everything ❤️

Will set the button using the scheme for now since in dark mode it's hard to read

Hope flutter fixes the elevation problems😅

[rydmike]

Thanks 🙏

Yes I agree the M3 style of this is hard to read in dark mode, especially if you use a bit darker primary color in dark mode, like your theme does in this case.

When you use a seed generated ColorScheme, in FCS that means enabling seeding, dark mode primary gets quite light by default M3 color system design, that helps a bit since then primary is guaranteed to follow the M3 color system guidelines.

Also it might be that ElevatedButron here is still using the a bit lower elevation I have for it in my opinionated M2 design on it. I will double check that, I thought I changed it to use exact elevation it uses in M3 design when you switch to using M3, but I might have forgotten that detail. It matters because with that slight increase in elevation it gets a bit more tint.

Plus I could add the elevation customization to it as a control.

---

Off topic a bit

If you are not familiar with how seed generated ColorScheme's work in Material 3 design and Flutter, I tried to explain it my Flutter Vikings theming talk. https://rydmike.com/blog_vikings_2022_talk

The streamed video quality of the talk is horrible, there will be better quality released soon I am told. But the slide deck used in the presentation is also included in the blog post, so there you can read more about it,

Yes the docs site to FlexColorScheme also talks about M3 seed generated ColorScheme, but I have noticed people seldom read long docs, 😃.

[abdelaziz-mahdy]

I used it like this to generate a color Scheme and picked the scheme for the buttons

darkTheme: FlexThemeData.dark(
               //scheme: FlexScheme.deepBlue,
               colorScheme: ColorScheme.fromSeed(
                   seedColor: Colors.blue, brightness: Brightness.dark),
               surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
               blendLevel: 15,
               appBarOpacity: 0.90,
               darkIsTrueBlack: true,
               dialogBackground: Colors.blueGrey.shade900.darken(),
               subThemesData: const FlexSubThemesData(
                 //blendOnLevel: 30,
                 blendOnLevel: 0,
                 cardElevation: 10,
                 blendOnColors: false,
                 inputDecoratorIsFilled: false,
                 inputDecoratorRadius: 40.0,
                 inputDecoratorUnfocusedBorderIsColored: false,
                 blendTextTheme: false,
                 elevatedButtonElevation: 10,
                 elevatedButtonSchemeColor: SchemeColor.onPrimary,
                 elevatedButtonSecondarySchemeColor: SchemeColor.primary,
               ),
               visualDensity: FlexColorScheme.comfortablePlatformDensity,
               useMaterial3: true,
               // To use the playground font, add GoogleFonts package and uncomment
               // fontFamily: GoogleFonts.notoSans().fontFamily,
             ),

but now the buttons are dead 😂😂😂😂😂😂😂

using elevatedButtonSchemeColor: SchemeColor.surface,

using elevatedButtonSchemeColor: SchemeColor.onPrimary,

i am very sorry if i understood something incorrectly but i tried to follow the docs and your comment

[abdelaziz-mahdy]

onBackground worked for me.

sorry for any inconvenience thank you for your time and thanks for the awesome package ❤️❤️❤️

[abdelaziz-mahdy]

how it looks now for refrence

[abdelaziz-mahdy]

       darkTheme: FlexThemeData.dark(
                //scheme: FlexScheme.deepBlue,
                colorScheme: ColorScheme.fromSeed(
                    seedColor: Colors.blue, brightness: Brightness.dark),
                surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
                blendLevel: 15,
                appBarOpacity: 0.90,
                darkIsTrueBlack: true,
                dialogBackground: Colors.blueGrey.shade900.darken(),
                subThemesData: const FlexSubThemesData(
                  //blendOnLevel: 30,
                  blendOnLevel: 0,
                  cardElevation: 10,
                  blendOnColors: false,
                  inputDecoratorIsFilled: false,
                  inputDecoratorRadius: 40.0,
                  inputDecoratorUnfocusedBorderIsColored: false,
                  blendTextTheme: false,
                  elevatedButtonElevation: 10,
                  //elevatedButtonSchemeColor: SchemeColor.onBackground,
                  //elevatedButtonSecondarySchemeColor: SchemeColor.primary,
                ),
                visualDensity: FlexColorScheme.comfortablePlatformDensity,
                useMaterial3: true,
                // To use the playground font, add GoogleFonts package and uncomment
                // fontFamily: GoogleFonts.notoSans().fontFamily,
              ),

now it fixed

i was using surfaceVariant as button background which lead to bad ui

[rydmike]

The challenge with a lot of config options, there are as many ways to makes things look good and bad! 😄

Thanks and glad if you got it to look the way you wanted it to look.

I will close this issue now and convert it to a Q&A to move it to repo discussions sections. It contains useful question(s) and answer(s) that others might want find useful there as well.

If you have more general FCS questions, don't hesitate to raise them in the discussions Q&A.

Another bug suspect, sure issues are just welcome too 🙏🏻 😄