How to define additional colors

[fotiDim]

I would like to define additional colors (e.g. successColor) that have different values on Light and Dark theme. Is there a straightforward way to do this with this package?

[rydmike]

Hi @fotiDim thanks for your question.

You can do it now with theme extension feature that was released in Flutter 3.0 by using a copyWith on the standard ThemeData created by FlexColorScheme.

In the soon coming next release I will expose the new theme extension API in FlexColorScheme directly too, so that the extra copyWith is not needed.

I will then describe how to use it in the docs as well.

If you are not familiar with Theme extensions, then my theming talk from a recent Flutter Nordics meetup and the demo app I used, has a simple example on how to use it. Adding more colors is one of the most common and asked for use cases with ThemeData in general, until Flutter 3.0 it was not really possible.

I made a blog that contains links to the live recorded talk video, used slides and gist/Dartpad of the simple demo I used in my talk.

Here it is https://rydmike.com/blog_m3_talk

The demo also contains a theme extension example, I think it is commented in the DartPad and can be uncommented to see it. It is also adds using a copyWith to an already made ThemeData object, since I needed to add it as an option to many different themes.

As FlexColorScheme only creates fancy complex, but regular ThemeData objects, the same method can be applied to ThemeData made using it, even if the demo in this talk did not use FlexColorScheme.

Hope this helps for now, and in next release I will make the extra copyWith not needed and provide an example on how to add custom colors in the docs too. 😃

(This reply written on phone so pardon any phone typos.)

[fotiDim]

@rydmike that's great timing then! Thank you for the detailed info! In the past I have been using extension methods to do this which worked fine. But since this is now baked into Flutter I will definitely use this.

Is there an ETA for the new version? No pressure, I just want to know if I should hold on before making the changes in my codebase.

[rydmike]

I try not to commit to timeline promises in side open source projects, since I might not be able to keep them due to other duties. Still it is progressing well now. The theme extension method has been added to next release and also a short example included in default example app. Needs a few more tests.

I'm doing a few other fixes as well for the next release 5.1.0. I have a bunch of new features I would like to add as well for my own needs, but I think I will leave them out of 5.1.0, postpone to 5.2.0 and just do the one that is still mentioned as TODO here: https://github.com/rydmike/flex_color_scheme/blob/post_io_updates/CHANGELOG.md

And as mentioned add some more test and few small updates to the Themes Playground app.

This issue Flutter SDK issue flutter/flutter#103864 is giving me some concern and headache. I have not found a good workaround for it yet. And the Flutter repo is unlikely to add a fix for it anytime soon. It is a major problem for the ThemesPlayground app, seems like it is making it unstable, at least in dev builds, but unlikely to cause an issue for FlexColorScheme users that are very unlikely to dynamically switch Typography in their active theme. However, the Themes Playground app can do it, and does it frequently. Have to test more and think of some potentially hacky work around for the issue if it is problem.

The fact that the entire Theming in Flutter is in big flux at the moment also makes it a bit challenging to keep it together in FlexColorScheme in a none style breaking manner from release to release. With the flux I'm referring both to the ThemeData changes (flutter/flutter#91772) and M3 (Material 3 (view) and flutter/flutter#91605) implementation that is still far from complete in Flutter. Still, it is a fun challenge too :)

[rydmike]

Closing, this is done via #58 and in latest release v5.1.0 https://pub.dev/packages/flex_color_scheme/changelog.