Cancel and Ok button colors regarding selected theme

[fvisticot]

I'm using an app with white theme for Material App:

primaryColor: Colors.white,
              colorScheme: ColorScheme.light(
                primary: Colors.white,
                onPrimary: Color.fromRGBO(0, 152, 187, 1),
                secondary: Color.fromRGBO(0, 152, 187, 1),
              ),

I try to use the ColorPicker showPickerDialog. Dialog is correctly displayed but cancel and OK buttons are displayed with white color and are not visible.

I think it is due to my primary: Colors.white configuration.

How to customize / theme the ColorPicker to display Cancel and OK button in a customized color ?

[rydmike]

Hi @fvisticot, thanks for your question.

The buttons follow the surrounding "ambient" theme of your Flutter application as they should.

If you create a theme with the colors like you have defined above, your are effectively telling pretty much ALL Flutter SDK UI widgets to be white and also other widgets that are designed to follow the surrounding application theme to be white. This is what you are seeing indeed, and even totally expected behavior with the theme you defined.

This is probably not the theme you want for you application, since you will be forced to manually give colors to all built-in widgets you use, instead of setting them once via the theme as you want them to look for your application.

I am perhaps a bit of expert on how theming works in Flutter. I for example also wrote FlexColorScheme a package to help Flutter devs theme their app, read/see more about in this tweet thread

What kind of theme do you want/need for your app?

If you explain how you want the colors to behave in your application, I can perhaps advise how you should approach that matter, so you can avoid making everything white.

In this case, what is it that you are trying to make white in light theme mode?

The AppBar? If AppBar then set the AppBarTheme sub theme, in ThemeData for your app, where you set its background color to white and foreground to e.g. black and you get clean AppBar, while at it, make its elevation 0 in its theme, or 0.5 for a slight underline effect.

Or perhaps it is something else you are trying to make white? AppBar is a common thing to want white though, popular in many clean light theme designs.

Making primary in ThemeData property colorScheme and primaryColor in ThemeData, white is not recommended and not a good idea for a light theme in Flutter. You will run into a lot of issues. Basically most standard Flutter SDK UI widgets will then be white and mostly invisible. Except text since it has color via other values in ThemeData. Primary color is intended to have a color that contrasts with the background, which is white in light theme mode, so making it white, is obviously not something you should do, unless you want "invisible" widgets, like buttons that depend on primary color. 😃

So back to your question. For the ColorPicker buttons, if you used the bottom buttons, these:

)

They can use use the Text, Outlined or Raised button style, and both buttons' style can be set independently.

https://pub.dev/packages/flex_color_picker#dialog-action-buttons https://pub.dev/documentation/flex_color_picker/latest/flex_color_picker/ColorPickerActionButtons-class.html

Theme wise they do use the surrounding theme, and yes, if you make primary color in colorScheme white, they will be white. Like pretty much every other standard widget in your app that use primary color.

If you insist that you for some reason must have primary as white, you can always surround the widget with a Theme of its own to give it color, make it black for example:

Theme(
  data: Theme.of(context).copyWith(colorScheme: ColorScheme.light(primary: Colors.black)),
  child: ColorPicker(...)
  ),
);

Alternatively you can use the top toolbar buttons instead of the bottom ones, they should turn up with dark on white since I think they are using icons theme and onSurface color in this case:

So that might work even with your everything white theme 👍🏻 😃

Hope any of this helps, BR Mike

[fvisticot]

Whaouuuuu!! tx a lot for this great post with lots of advices !! All is fixed an working like a charm :)

[rydmike]

Glad it helped @fvisticot ! 👍🏻 Closing the issue! 😃