Add option to change color code format

[Adrian-Samoticha]

Currently, when enabling the showColorCode flag, the widget will display the color codes in a 0xAARRGGBB format. However, it might be desirable to be able to change both the prefix and the order of the channels. For instance, in a package I am developing I was hoping to be able to show the color codes in an #RRGGBBAA format instead.

Cheers.

EDIT: I have just learned about the copyFormat attribute, which does allow you to change the prefix, however, the alpha channel can only be removed entirely, and not be repositioned. Perhaps a ColorPickerCopyFormat.numHexRRGGBBAA would solve this issue?

[rydmike]

I will see what I can do without major rewrites in the next update.

As I recall the alpha channel is using the TextField prefix to show alpha value. I don't even remember off hand if there is an equivalent suffix that could be used to display alpha after the RGB. If there is that should be reasonable to add. Perhaps though, how it is displayed is less critical as long as it is clear and as long as a copy gets you the value in preferred format?

For the "copy" action to support the required format should not be a problem though, I can easily add a new format for that.

However, for paste it currently automatically supports all the different formats it currently support for copying all at once. It parses any pasted string and does the right thing, see https://pub.dev/packages/flex_color_picker#color-code-formats-and-paste-parsing

This can however not support pasting #RRGGBBAA at the same time, as it is not distinguishable from #AARRGGBB, not sure how I would/should handle that. It would be kind of odd if it suddenly did not automatically support all supported formats at once when pasting values to it.

[Adrian-Samoticha]

Perhaps though, how it is displayed is less critical as long as it is clear and as long as a copy gets you the value in preferred format?

Well, in my case at least, I'm actually more interested in the value being displayed than it being copy-able. I am displaying color settings in a widget that looks somewhat like this ...

... and it seems kind of odd to not be able to see the hex value while editing it using the flex color picker.

It would be kind of odd if it suddenly did not automatically support all supported formats at once when pasting values to it.

Perhaps it should prefer whichever format it is displaying. I admit that would not be a “clean” solution, but I suppose it would work and be intuitive to use.

[rydmike]

Hex alpha can be displayed, but as you also concluded only as a prefix, which is the Dart way and style of doing it. It can however not be edited, only manipulated with the slider when opacity is enabled. Since you can't edit it and it is also typically, like in the web demo, shown in another style, there is usually no confusion which part is the alpha value, even if Dart order might seem unconventional.

TextField decorator supports suffix too, so hex alpha could certainly be shown after instead in current field, would not be so hard to add that option with a few new formats, agreed.

I brought up the paste feature, because adding those formats would mean breaking past behaviour where it automatically parses and supports all currently supported formats when you paste values into it. I can't do that if I add the new formats, and I don't want to break that existing feature. This complicates adding this feature, all solutions I have come up with so far are a bit messy and not so clean. Suggestions are welcome of course, but I don't see any solution other than breaking past behaviour at the moment.

It would be a nice feature to have, I like many and flexible config options 😀 just need a clean way to add it.

[Adrian-Samoticha]

I guess you're right. Perhaps I should just change the color code format to #AARRGGBB in my application, then? I've set it to #RRGGBBAA because I believed that was the “global standard” so to speak, though I suppose if Dart has a different convention, maybe I should just follow that, instead, considering that the application I am developing is targeted specifically at Flutter developers, after all.

[rydmike]

It is certainly the order of things in CSS world like you have it, which is definitely more global than Dart, totally agree on that.

I use the picker often to copy/paste hex RGB values to Dart code, that is why I used this order when I made it, since it works well when I need colors copy/pasted from it to Dart code. Which is why it even has the "0x" instead of "#" as a copy format option, even less typing of color codes when I copy them to Dart code.

In the picker web demo and using formatting it supports, I used another style for the alpha value, just to make it clear visually where it is.

If you do the same and have it in slightly smaller font in your widget in the last chars, I think it could be clear enough that is alpha in it, and you can match the style in the picker, then even if it is first there, it should be clear where it is. Sure a bit weird, but could work as interim solution if you prefer to keep it last in your widget, which I totally get too if that is where the audience expects it to be.