Can I provide theme thumbnails?

[jahnli]

I want to give the user a choice of themes in my APP, but I have no idea how to display them, can I provide thumbnails of themes in themesplayground, I can't find them in the warehouse

[rydmike]

Hi @jahnli and thanks for your question.

If you want to you can certainly use the widget used above to make your own thumbnail theme selection too. The widget used to make the above thumbnail is actually a part of the package. Although it is not so difficult to build your own, but in very early version I was asked if I could add it as widget to the package, and I did and it is still around, just not very well advertised 😄

In the docs you can find a bit info about it here: https://docs.flexcolorscheme.com/deep_dives#flexthememodeswitch

Where there are also links to its API docs. It was primary offered as a theme mode switch button: https://pub.dev/documentation/flex_color_scheme/latest/flex_color_scheme/FlexThemeModeSwitch-class.html but its building block just the box with the four colors is also available, https://pub.dev/documentation/flex_color_scheme/latest/flex_color_scheme/FlexThemeModeOptionButton-class.html

As shown in the docs page it can be styled quite a bit:

For some examples of how to use it as theme selector, then talking about the FlexThemeModeOptionButton,
you can check the open source Themes Playground code. The Playground is actually step/example 5, in FlexColorScheme usage tutorial: https://docs.flexcolorscheme.com/tutorial5

Here you can find the code for this full screen horizontal theme color selector

and also for the vertical theme color selector

using the theme thumbs and see how it was used in the Themes Playground app:

https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example5_themes_playground/widgets/panels/theme_colors_settings/input_colors_selector.dart

In the Themes Playground colors panel, there is also a popup menu based theme selector:

Since this code base was originally made as a tutorial for showing different possibilities it sometimes app wise contain different ways of modifying and doing things, just as a tutorial. As an app UX it can actually be a bit confusing, so I plan to remove these dual ways of doing things a future redesign of the Playground app.

In this case the code for the popup example is more "isolated" and it is a much easier example to use to see how it makes the theme color selection thumbs:

https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example5_themes_playground/widgets/panels/theme_colors_settings/input_colors_popup_menu.dart

This is just one way of making theme color thumb presentations, I've seen more elegant ways of providing a mini app as thumb with prominent colors shown on maybe 5 widgets. The thumbs used in this app is just one example that can also serve as a guide on how to make something even fancier.

[jahnli]

Thanks for your answer, I'll try later

[jahnli]

But there's almost no way to use a preset theme by naming it

FlexScheme。indigoM3, FlexScheme.material] . map ((v) = > FlexThemeModeOptionButton ())

@rydmike

[rydmike]

No, not directly from the FlexScheme scheme enum names to a button, but you can make such a mapping.

The PopupMenuButton builds the thumb buttons via a FlexSchemeColor. You you can get from the enum value to its FlexSchemeColor via the FlexColor.schemes map, and then the rest would be similar as the example.

Extraction of the enum associated FlexSchemeData and from it the FlexSchemeColor colors directly via functions in the enum would be a handy feature though. I think that could be useful in the API. I will probably add that in the next release.

[rydmike]

Added an enhancement issue for the needed convenience API on enum FlexScheme here #210