New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
White colour selects multiple colour #66
Comments
Hi @GAayushi, thanks for the report. Can you provide a code sample including the custom Even without it, here is what I suspect is going on. If you set the picker to show the "old" Material2 style palettes If a selected color exists in more than one The actual color selection of "white" in this case, if you paste in the white value, would be selected from the first If you enable the The situation you show above, can however be reached by selected the top blue color and then clicking on white in its tonal palette. FlexColorPicker is still focused mainly on Material2 style palettes, where its source colors use the indexes from 50 too 900, and that do not even in a correct If you generated the custom Of course making custom When using Material3 tonal palettes the situation is totally different, as a tonal palette starts from index 0 and it is always fully black and ends in index 100, being fully white, with then varying Chroma and Hue on the tones in between. Currently FlexColorPicker has very limited support for M3 tonal palettes, but it is on my todo list to add that, by adding an own Tonal Palette color picker tab. However, such a release would probably be major new version and break some pasts older features. Since I would probably clean feature to show tonal palettes at same time with MaterialColor, since that is a bit confusing and conflicting. It might be possible to add a small fix to not show a check mark on other palettes containing selected color, when using a setup where the selected Material shades are not shown at all and showing only the Tonal Palette, like you do here, so that it would not indicate the other palettes where the color exists. Currently this is behaving as expected, but when not showing the I may look into this. It might also be something I don't add until I do major feature bump on the ColorPicker. It is way over due for a major feature bump. |
Hello, Please take a look of the code, I'm currently using. I'm allowing user to choose the colour form the wheel, and with those selected colour, I'm creating Swatches. Also, I've used class NewColorPicker extends StatelessWidget {
final Function(String) _changedColor;
final RxString color;
final TextEditingController colorEditController = TextEditingController();
final ReactiveRecord model;
final designController = Get.put(DesignController());
final RxBool showCustomLibrary;
NewColorPicker(
this._changedColor,
this.color,
this.model,
this.showCustomLibrary,
);
@override
Widget build(BuildContext context) {
var customSwatchList = colorMap(designController.model.value!.colorList);
colorEditController.text = color.value;
return Obx(() => Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(6),
child: Card(
elevation: 2,
child: ColorPicker(
// Use the screenPickerColor as start color.
color: HexColor.fromHex(color.value) ?? const Color(0xff4C45D6),
// Update the screenPickerColor using the callback.
onColorChanged: (Color color) => changeColor(color),
width: 44,
height: 44,
heading: Text(
'select_color'.tr,
style: Theme.of(context).textTheme.headlineSmall,
),
enableShadesSelection: false,
wheelWidth: 24,
wheelSquarePadding: 8,
wheelSquareBorderRadius: 8,
enableTonalPalette: true,
enableTooltips: true,
copyPasteBehavior:
ColorPickerCopyPasteBehavior(copyFormat: ColorPickerCopyFormat.hexRRGGBB, snackBarMessage: 'Code copied successfully'),
tonalSubheading: Text('Material 3 tonal palette'),
pickersEnabled: <ColorPickerType, bool>{
ColorPickerType.wheel: true,
ColorPickerType.custom: showCustomLibrary.value,
ColorPickerType.accent: false,
ColorPickerType.primary: false
},
customColorSwatchesAndNames: customSwatchList,
showColorCode: true,
showColorName: true,
colorCodeHasColor: true,
pickerTypeLabels: <ColorPickerType, String>{ColorPickerType.custom: 'Your Colour Library'},
),
),
),
),
SizedBox(
height: 30,
),
AdminFormSubmitButtons(
onPressedAction: onPressedActionHandler,
firstButtonText: 'okay_text'.tr,
secondButtonText: GetStringUtils('cancel_text'.tr).capitalize!,
),
],
));
}
/// Buttons click handler
void onPressedActionHandler(ActionType actionType) {
switch (actionType) {
case ActionType.FirstButtonClick:
if (UIUtil().isValidColor(color.value)) _saveColor(); // On Save
break;
case ActionType.SecondButtonClick:
Get.back(); // On Cancel
break;
default:
}
}
void changeColor(Color newColor) {
color.value = newColor.toHex();
colorEditController.text = color.value;
}
void _saveColor() {
_changedColor(color.value);
Get.back();
}
Map<ColorSwatch<Object>, String> colorMap(List<String> colorSwatchList) {
var customSwatch = <ColorSwatch<Object>, String>{};
for (var colors in colorSwatchList) {
print('colorMap $colors');
customSwatch[ColorTools.createPrimarySwatch(HexColor.fromHex(colors)!)] = '';
}
return customSwatch;
}
}
|
I have a behavior enhancement, or fix if you so prefer to call it, for this use case. I need to test it a bit more still. I will use your sample to test it as well. Thanks for submitting it. I might bundle this improvement/fix with a few other ones before the release. Of course, if you desperately/urgently need it I can release it in its own fix version as well. |
Hy, It would be great if we could have that fix earlier. |
Hi @GAayushi, thanks for raising this issue. Hope you have had a chance to try it. There might be some edge cases where the solution I made for this might not be ideal. Hopefully you won't be running in to those. Anyway, let my know how the fix has worked out for you or if there is still some edge case with it for your usage. |
I've created a custom colour library. While selecting some light colours and white colour, if we select white colour from the material tone palette, multiple colours are selected. Please find the screenshot.
The text was updated successfully, but these errors were encountered: