Exmaple 1 from the docs Does not appear as Expected

[Raider-hub]

Following the examples in Docs. I applied example 1 to the counter App and it appeared differently on light mode.

Code:

results :

how can i also customize the widget to my app Bran look(e.g customizing the elevated button color, and shape,radius, overiding the default background color.

Sorry i'm still trying to understand how the package works.

My major concern is using this package to replicate the same brand App theming/design with M3 enabled.

[√] Flutter (Channel stable, 3.13.0, on Microsoft Windows [Version 10.0.22621.1992], locale en-NG)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[√] Chrome - develop for the web
[X] Visual Studio - develop Windows apps
X Visual Studio not installed; this is necessary to develop Windows apps.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.1)
[√] VS Code (version 1.81.1)
[√] Connected device (2 available)
[√] Network resources

[rydmike]

Hi @Raider-hub,

Glad to hear you are trying out FlexColorScheme.

For example 1, the docs shows what the app looks like in Material-2 mode when useMaterial3: false.

There is a toggle in the newer example app where you can set it to M2 or M3. The current version defaults to starting in M3 mode.

I should perhaps update the screen shots for it in the docs, or maybe just add the screen shots for what it looks like in Material-3 mode as well. For now I just added an explanation that it starts in M3 mode and can be toggled to the shown M2 mode and challenge the reader to do so 😄

If you toggle the example 1 to Material-2 mode, it will be using the same theme as the one you see in the doc here https://docs.flexcolorscheme.com/tutorial1#result and look the same.

Example 1) Material-3 mode.	Example 1) in Material-2 mode.

On the other hand, the counter app above in your example, is set to useMaterial3: true, so it does match the defaults of example-1 app, if you build it or run the web demo for the first time. However, like you correctly said, it does not match the theme image shown in the docs, here https://docs.flexcolorscheme.com/tutorial1#result, but the updated doc now explains that as well. Thanks for pointing out this doc update need! 👍🏻

Of course, the counter app, in your example, shows so few widgets so the only diff you can see easily is the FAB and AppBar in the counter app, still that is quite a lot since they are radically different between M2 and M3 design.

Nowadays when you create a new default Flutter counter app, it has useMaterial3: true defined, like your example code does.

NOTE: Eventually M2 mode is going away completely in Flutter. Next Flutter release will have useMaterial3: true as default without setting it explicitly, it still defaults to false unless you define it to true. Next release might even deprecate the useMaterial3 flag, but not yet the impact of it, but after a year after it may even be removed from the framework. That has at least been mentioned by the Flutter team.

---

As for learning more about FlexColorScheme. Most devs I talk with tend to use the ThemesPlayground app to configure the theme visuals and components the way they want them to look and just copy-paste the FlexColorScheme API config code to their app.

If you look at the FlexColorScheme API code view in the Themes Playground, as you visually configure theme settings in the Themes Playground, you can see and learn what changes what in the API code, as you change settings.

When you are done, you can just copy paste the config setup to Flutter, it is not necessary to learn the API, but of course a good idea to do so.

More about the Playground in the docs here https://docs.flexcolorscheme.com/playground.

Going through all the tutorials, from example-1 that you started with is certainly very useful. Playing with the hot-reload example, the repo default example, can also be useful.

The API guide covers basics to advanced features: https://docs.flexcolorscheme.com/api_guide

There are also full pub generated API docs, but at the moment https://pub.dev/ is still NOT updated to use Flutter 3.13.0 and Dart 3.1.0, so the API doc generation is till broken. It has been so for 3 days now. Hoping it will be fixed soon.

(Pub still running on Pana 0.21.35, Flutter 3.10.6, Dart 3.0.6., so it cannot generate doc API for latest FlexColorScheme that requires Flutter 3.13.0, it should be fixed by the Flutter team soon and back automatically when it is.)

If you want to learn more about Flutter theming in general, that applies without using FlexColorScheme, there is guide section for that too: https://docs.flexcolorscheme.com/theming_guide

---

This is a good question, but not really a package issue. I like to move good questions and discussions like this to the repo Discussions section so it becomes a part of the Q&A there and more free form Q&A's and we can can continue the discussion and Q&A there.

[Raider-hub]

Thank you so much for your response @rydmike . this explains alot. i think i must have been learning this whole time the wrong way. today is the 5th day i woke up trying to understand how I can use Custom FlexColorScheme for my Brand App design. I have literally read and watched almost all the videos you have made about it. starting from the pair programming with Majid to the flutter Vikings, reading your PowerPoint slide and following through the docs. i have never really invested my time into learning proper theming. but i have generally learned alot. Understood the whole components that make up the material 3 design.
The trouble i have faced so far is being able to create my own custom colors integrate it with FCS and give me the expected result. i actually almost gave up on it and decided to work with themeData and themeExtensions. Waking up to your response is motivating and I feel the energy to go back and keep practicing. I initially didn't put emphasis on the PlayGround. I mostly saw it as a place to see the power of FCS. But i will put in time into learning that and see how i can copy and modify it, Thank you very much for your response

WHAT I WANT TO REPLICATE WITH THE FCS USING M3

I hope this is possible?

I may be a slow learner. but I have a lot of dedication and that seems to help me most of the time. once again. thanks for your response, I truly Appreciate

[rydmike]

You can totally make something like the above design.

The above design is color mapping wise Material2 based. To make it more future proof I would recommend reconsidering the color mappings a bit to match Material3's color system.

The primary and primaryContainer colors are fine, but in M3 color system, the secondary color and its container color are usually same hue as primary, but a bit less chromatic version of primary color. It does not have to be, but Material component default mappings look good if it is. You can make it more chromatic than it is by default, and also a bit "off" in hue from primary, this will still also work well and look good with default color mapping. You can of course remap colors as you please.

You should prefer to use tertiary color and tertiaryContainer color for you additional custom colors, over secondary, as very few (hardly any) Material component use them by default, but you can use them to make custom color remapping using them as secondary brand color(s) via it. M3 color system work better if you use it for your custom/extra color. Primary should of course be your main brand color.

Typically there is no need to "sacrifice" secondary/tertiary color and use it for the main contrast color black (or close to black) in light mode (white/off-white in dark mode), as in the above design. As there are plenty of those colors in the ColorScheme that you can map to components default if/when needed.

When designing a custom Material3 ColorScheme I recommend using the seeding tools and locking main seed color(s) to the desired brand color(s), but letting the algo calculate all the rest of the colors, the are so many of them. By default Material3 is all about tinted surfaces in light and dark mode. However, it does not have to be, you can easily remove all of that with FlexColorScheme, even if you use one of its many different seeding strategies. I do recommend keeping some tint on Android platform, but if you want to, with FlexColorScheme you can make a theme that keeps tint in M3 on Android, but uses a more platform agnostic design automatically on other platforms.

Some guides

I have earlier made two, to your use case relevant tweet thread guides. They can be found via links in the docs too.

The first one is a custom theme design example, in the docs here https://docs.flexcolorscheme.com/tweets#a-theme-story, that has a direct link to this tweet thread https://twitter.com/RydMike/status/1658657667622248449

The other one is an example of platform adaptive and platform agnostic design. In the docs here https://docs.flexcolorscheme.com/tweets#platform-agnostic-theme with this tweet thread link https://twitter.com/RydMike/status/1672764806544146435

They might be helpful guides to point you in the right direction.

I'll might drop some example ThemesPlayground screen shots with your above colors later, just for fun... 😄

[rydmike]

So just as an example, I played around a bit with the primary and primaryContainer colors, adding some secondary tweaks and pretty random tertiary color since I had no desired input on that. It is Material3, but using some familar Material2 influences, but also a few custom mappings and styles.

Looks like this in light and dark mode:

More examples:

And even more:

Of course this was just a very quick example:

The complete theme for the above design can then just be copy/pasted using e.g. the "Copy theme code" menu button. The theme code for the above demo looks like this:

// Theme config for FlexColorScheme version 7.3.x. Make sure you use
// same or higher package version, but still same major version. If you
// use a lower package version, some properties may not be supported.
// In that case remove them after copying this theme to your app.
theme: FlexThemeData.light(
  colors: const FlexSchemeColor(
    primary: Color(0xffe37708),
    primaryContainer: Color(0xfffcf2e8),
    secondary: Color(0xffb6602f),
    secondaryContainer: Color(0xffffede6),
    tertiary: Color(0xff747d03),
    tertiaryContainer: Color(0xffbfc39b),
    appBarColor: Color(0xffffede6),
    error: Color(0xffb00020),
  ),
  surfaceMode: FlexSurfaceMode.highSurfaceLowScaffold,
  blendLevel: 2,
  appBarStyle: FlexAppBarStyle.primary,
  tabBarStyle: FlexTabBarStyle.forAppBar,
  subThemesData: const FlexSubThemesData(
    blendOnLevel: 9,
    useTextTheme: true,
    useM2StyleDividerInM3: true,
    elevatedButtonSchemeColor: SchemeColor.onSecondary,
    elevatedButtonSecondarySchemeColor: SchemeColor.secondary,
    inputDecoratorRadius: 10.0,
    inputDecoratorUnfocusedHasBorder: false,
    fabUseShape: true,
    fabAlwaysCircular: true,
    fabSchemeColor: SchemeColor.primary,
    alignedDropdown: true,
    useInputDecoratorThemeInDialogs: true,
    appBarScrolledUnderElevation: 0.0,
    navigationBarSelectedLabelSchemeColor: SchemeColor.onSurface,
    navigationBarUnselectedLabelSchemeColor: SchemeColor.onSurface,
    navigationBarSelectedIconSchemeColor: SchemeColor.onSurface,
    navigationBarUnselectedIconSchemeColor: SchemeColor.onSurface,
    navigationBarIndicatorSchemeColor: SchemeColor.secondaryContainer,
    navigationBarIndicatorOpacity: 1.00,
  ),
  keyColors: const FlexKeyColors(
    useTertiary: true,
    keepPrimary: true,
    keepSecondary: true,
    keepTertiary: true,
    keepPrimaryContainer: true,
    keepTertiaryContainer: true,
  ),
  tones: FlexTones.candyPop(Brightness.light),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  useMaterial3: true,
  swapLegacyOnMaterial3: true,
  // To use the Playground font, add GoogleFonts package and uncomment
  // fontFamily: GoogleFonts.notoSans().fontFamily,
),
darkTheme: FlexThemeData.dark(
  colors: const FlexSchemeColor(
    primary: Color(0xffffb871),
    primaryContainer: Color(0xffe27a0d),
    secondary: Color(0xffb6602f),
    secondaryContainer: Color(0xff552000),
    tertiary: Color(0xffbfc39b),
    tertiaryContainer: Color(0xff747d03),
    appBarColor: Color(0xff552000),
    error: Color(0xffcf6679),
  ),
  surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
  blendLevel: 13,
  appBarElevation: 3.0,
  tabBarStyle: FlexTabBarStyle.forAppBar,
  subThemesData: const FlexSubThemesData(
    blendOnLevel: 13,
    useTextTheme: true,
    useM2StyleDividerInM3: true,
    elevatedButtonSchemeColor: SchemeColor.onSecondary,
    elevatedButtonSecondarySchemeColor: SchemeColor.secondary,
    inputDecoratorRadius: 10.0,
    inputDecoratorUnfocusedHasBorder: false,
    fabUseShape: true,
    fabAlwaysCircular: true,
    fabSchemeColor: SchemeColor.primary,
    alignedDropdown: true,
    useInputDecoratorThemeInDialogs: true,
    appBarScrolledUnderElevation: 7.5,
    navigationBarSelectedLabelSchemeColor: SchemeColor.onSurface,
    navigationBarUnselectedLabelSchemeColor: SchemeColor.onSurface,
    navigationBarSelectedIconSchemeColor: SchemeColor.onSurface,
    navigationBarUnselectedIconSchemeColor: SchemeColor.onSurface,
    navigationBarIndicatorSchemeColor: SchemeColor.secondaryContainer,
    navigationBarIndicatorOpacity: 1.00,
  ),
  keyColors: const FlexKeyColors(
    useTertiary: true,
    keepTertiary: true,
    keepPrimaryContainer: true,
    keepTertiaryContainer: true,
  ),
  tones: FlexTones.candyPop(Brightness.dark),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  useMaterial3: true,
  swapLegacyOnMaterial3: true,
  // To use the Playground font, add GoogleFonts package and uncomment
  // fontFamily: GoogleFonts.notoSans().fontFamily,
),
// If you do not have a themeMode switch, uncomment this line
// to let the device system mode control the theme mode:
// themeMode: ThemeMode.system,

If you just want the ColorScheme, and want to make the theme manually yourself without FlexColorScheme package, you can also just copy the ColorScheme that the above theme uses with the "Copy ColorScheme" menu option. The light and dark schemes look like this:

// Light and dark ColorSchemes made by FlexColorScheme v7.3.1.
// These ColorScheme objects require Flutter 3.7 or later.
const ColorScheme flexSchemeLight = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xffe37708),
  onPrimary: Color(0xfffffcf8),
  primaryContainer: Color(0xfffcf2e8),
  onPrimaryContainer: Color(0xff121211),
  secondary: Color(0xffb6602f),
  onSecondary: Color(0xfffefbf9),
  secondaryContainer: Color(0xffffe3d1),
  onSecondaryContainer: Color(0xff301400),
  tertiary: Color(0xff747d03),
  onTertiary: Color(0xfffbfcf7),
  tertiaryContainer: Color(0xffbfc39b),
  onTertiaryContainer: Color(0xff0e0f0c),
  error: Color(0xffba1a1a),
  onError: Color(0xffffffff),
  errorContainer: Color(0xffffdad6),
  onErrorContainer: Color(0xff410002),
  background: Color(0xfffefdfd),
  onBackground: Color(0xff161311),
  surface: Color(0xfffefdfc),
  onSurface: Color(0xff161311),
  surfaceVariant: Color(0xfff1e5de),
  onSurfaceVariant: Color(0xff201a17),
  outline: Color(0xff4d4541),
  outlineVariant: Color(0xffb4a9a4),
  shadow: Color(0xff000000),
  scrim: Color(0xff000000),
  inverseSurface: Color(0xff35302d),
  onInverseSurface: Color(0xfffff8f5),
  inversePrimary: Color(0xffffdcc5),
  surfaceTint: Color(0xff944b00),
);

const ColorScheme flexSchemeDark = ColorScheme(
  brightness: Brightness.dark,
  primary: Color(0xffffb871),
  onPrimary: Color(0xff321a00),
  primaryContainer: Color(0xffe27a0d),
  onPrimaryContainer: Color(0xfffff7ec),
  secondary: Color(0xffe79b49),
  onSecondary: Color(0xff1a0a00),
  secondaryContainer: Color(0xffaa6819),
  onSecondaryContainer: Color(0xfffff1e7),
  tertiary: Color(0xffbfc39b),
  onTertiary: Color(0xff0c0c0a),
  tertiaryContainer: Color(0xff747d03),
  onTertiaryContainer: Color(0xfff6f7eb),
  error: Color(0xffffb4ab),
  onError: Color(0xff310001),
  errorContainer: Color(0xff93000a),
  onErrorContainer: Color(0xffffedea),
  background: Color(0xff201b15),
  onBackground: Color(0xfff7efeb),
  surface: Color(0xff201b15),
  onSurface: Color(0xfff7efeb),
  surfaceVariant: Color(0xff3f352e),
  onSurfaceVariant: Color(0xffebe0d9),
  outline: Color(0xff988f89),
  outlineVariant: Color(0xff645d58),
  shadow: Color(0xff000000),
  scrim: Color(0xff000000),
  inverseSurface: Color(0xffe9ded7),
  onInverseSurface: Color(0xff1e1b19),
  inversePrimary: Color(0xff8b5000),
  surfaceTint: Color(0xffffb871),
);

You don't need to do this when using the first FlexColorScheme setup though, as the same colorScheme is already baked in into the ThemeData it produces.

The Theme Code is also visible in its own panel:

If you keep it open on left or right side and modify settings in another settings panel, you can see what it changes interactively as you change settings 😄

[Raider-hub]

Hello @rydmike I can't thank you enough, for putting out your time to support me on this. Everything you've mentioned here will clearly guide me on how to properly use FCS and the Theme playground. we truly appreciate what you're doing for the community. Thank you so much for doing this. I hope you have a wonderful day.

[rydmike]

You are very welcome @Raider-hub hope it helps and wow thank you so much for the sponsorship! 🙏🏻 💙 😄
Feel free to drop more questions here in discussions anytime. I'll do my best to answer as soon as I can.

I am trying to build up a bit of knowledge and info base here in discussions that other devs can use as source of information too. There is already a few Q&As with quite extension answers, some of them go into theming in general too.

By the way, you are now of course also listed in the FlexColorScheme docs sponsors page 👍🏻
https://docs.flexcolorscheme.com/sponsors (might need a few refreshes to show up, until old caches are purged).

I will tweet a thank you note shortly too. Not sure what your X/Twitter handle is to tag you, but I'll add your GitHub handle.

[Raider-hub]

Thank you so much @rydmike you don't have to mention. you deserve more than this. we will try to support the great work that you are doing. yes, I can always go through the Discussions for the Q&A. Thank you once more