rydmike / flex_color_picker Goto Github PK

I'm creating a custom palette based on primary colors. For this I create use "ColorTools.primaryColorNames" and then I would like to add the color Black, and then when I click on that color, grayscale (black and white) is displayed in the tonal palette. Is possible? Thanks for the amazing lib

When I try to run the application getting this error.

../tools/flutter/.pub-cache/hosted/pub.dartlang.org/flex_color_picker-2.3.0/lib/src/widgets/color_picker_toolbar.dart:113:44: Error: The argument type 'double?' can't be assigned to the parameter type 'double' because 'double?' is nullable and 'double' isn't.
              iconSize: effectiveIconTheme.size,

Directly am not using this plugin. But one of the plugin(https://pub.dev/packages/html_editor_enhanced) is using this library. So not able to figure it out how to fix it.

Hi Mike,

Just a feedback, I think adding an option for something like: quickAccessColorList and quickAccessSubheading could be a nice add-on. I didn't face any issues to implement it myself but I thought I'd share the idea with you in case you find fit for this package. I personally found it useful when adding a list of recent colors, or a list of favorite colors as shown below:

Edit:
By the way, not visible in the screenshot, the Recent Colors are shown in every tab.

Current style with and iOS based slider might not be ideal for all projects. Add an optional selector that is Material based (ToggleButtons) that also supports custom widgets for the picker type selector items. ToggleButtons also supports keyboard navigation on Desktop/Web which iOS Cupertino slider does not.

It could also be some other custom picker page selector that is more compact and works with keyboard navigation.

Add transparency as an option to the wheel picker.

See: #2

• As a slider
• As an option for the text entry

Different platform use different order Ok and Cancel action buttons. As in OK-CANCEL versus CANCEL-OK on buttons at the bottom of a dialog.

Add capability to manually specify order of the buttons and possibility to specify to use platform adaptive order as well, plus using directionality affected order as well.

Too look into:
How does directionality affect default order of OK-CANCEL on platform based order when directionality is used?

For order config an enum with these values could be used:

• buttonOrderOkCancel
• buttonOrderCancelOk
• buttonOrderDirectionalOkCancel
• buttonOrderDirectionalCancelOk
• buttonOrderPlatformBased
• buttonOrderDirectionalPlatformBased

Where Directional indicates that directionality is used to determine from which side the first button is placed, in listed order in enum value.

I am trying to store the color selected into sharedpreference, but it looks like the callback function isn't working:

  color: screenPickerColor,
                onColorChanged: (Color color) {
                  print("new color ");
                  print(color);
                },

I have noticed some of my app users have difficulty noticing they need to confirm color selection by clicking the OK button. Seriously, some close the dialog and are surprised the color was not changed.

Question: Would it be ok to add a bool parameter in the ColorPickerActionButtons (updateOKButtonLikeCrazyToShowUsersWhatITDoes is the working title) that would modify the background color of the OK Button so it makes folks notice "here is what to click next" ?

If yes, I would be happy to make a PR with that, but before I start googling how to 1) modify, 2)test flutter packages locally I decided to ask not to get a "it is not welcome" response later.

PS. Font Color for the OK button shall be changed as well based on the grayscale representation of the color currently picked to avoid white font on almost-white background scenario. (https://support.ptc.com/help/mathcad/r9.0/en/index.html#page/PTC_Mathcad_Help/example_grayscale_and_color_in_images.html)

This is just minor visual issue on the demo apo (I think)

I'm facing this problem, that while using colour wheel, if I try to move the inner square selector circle, sometimes it doesn't move, instead the outer circle move. This problem occurs mostly when inner circle is at any corner or on the outer edges of the square. We need to click on the square first then the inner circle moves. Any fixes for this?

Flutter's dev channel introduces null-safety. Are there plans to migrate the plugin to support null-safety? Potentially with a prerelease for people using the dev channel already?

In some cases it might be useful to be able to pick multiple colors in one go and return them, maybe even with optional usage tags.

I'm incorporating this package into my app, and I noticed that it only seems to support a single custom color picker. As part of my app's UX, I'd like to support the ability for users to select from various pre-set themed color palettes.

First I wanted to confirm that this isn't possible in the existing implementation, and if that's the case I might take it upon myself to fork and implement it, and if it is deemed to be something that might be of interest to others, I can make a PR as well.

Demo video of my app is provided here for reference to understand the use case. In this demo I have one custom color palette ("Pastels") and the "Primary" palette (renamed "Bold").

Thanks for any input!

Hi great plugin!. Any way to add a padding to square inside the wheel?

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.

Hi @rydmike ,

A huge thank you for this package, it is extremely complete.

Just a small suggestion, the possibility to choose a color among the 1566 named colors in the form of a list or a grid with the possibility to research.

Have a nice day

Hi,

I would like to use the color picker in a mobile app. Looking at the license agreement, specifically point 2:
"Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution."

There is no documentation or anything else shipped with the application. Would it be sufficient to mention the color picker on the accompanying web site in my attribution section and link to the license? If not, would would be your advice to proceed in case of Android/iOS mobile app?

Thanks and best regards
Kras

@rydmike Thanks for this awesome color picker and yeah also for adding the opacity support much faster than expected !!

In the near by future are you planning to optionally allow the user to have a linear gradient strip of color instead of having a ring one ??

Having a rectangular curved strip instead of a ring one as by the user's choice would be interesting.

I am although trying to understand your code of the Color Wheel Picker, but yeah there is a lot to be done as the pickers are currently on the ring.

You can find the gist here, as I've started to do some edits: https://gist.github.com/justkawal/cbb6e35d1a9ac4e1cb7a667b436ef096

flutter/flutter#63226

The issue is not resolved, but I have worked around it for most parts. This Flutter issue set back progress on the new release a few days.

This Flutter issue has a workaround in FlexColorPicker, there is no urgent need to fix it. However, for keeping track of the Flutter issue, this issue is used as a tracker for when the root issue in Flutter SDK is resolved.

Material Design 3 introduces Tonal Palettes instead of the M2 swatch.
https://m3.material.io/styles/color/the-color-system/key-colors-tones

Add feature to generate the Tonal Palette of a selected color and pick one of its colors.
Since the algorithms for it are public we can even use the same packages that Flutter SDK uses for the Tonal Palettes.
https://pub.dev/packages/material_color_utilities

Add more comprehensive testing. Target 85% codecov.

The property tonalSubheading in the convenience dialog function showColorPickerDialog is never passed along to the ColorPicker used to construct the dialog, causing the tonal sub heading to never show up in the resulting dialog.

Hey, Firstly thanks for this awesome library with wide variety of features.

I wanted to go for transparent selection but I was unable to find it ?

Unless I'm missing on how to do it, it would be nice to have a way of changing currently selected color.
I have a dialog (rolled my own, not using showPickerDialog) with color wheel where I would like to have a reset button that would set the color in the wheel to something predefined.

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 ?

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?

If TextFormField or TextField is used while using ColorPicker not able to use keyboard at all.

On clicking on TextFormField soft keyboard appears and instantly disappears.
If ColorPicker removed above issue is not coming.
Tested on Android.

Idea

I thought about a feature where the developer can provide a list of color values, that either get grayed out or be non selectable in the color picker.

Why would this be useful?

I enable users to select their own player color in my app, which is in turn used in statistics. On initial creation the user gets a random color assigned which is not yet selected by another user. The user is able to change the own color, but it would be great, if a visual indicator would show which colors are already selected.

What is your take on this?

Is there any way to allow transparent as a color option, without showing the opacity slider? I want to the user to be able to pick from the standard color swatches plus transparent. I don't want them to be able to set the opacity of any of the other colors.

To reproduce the problem you need to modify example from: https://pub.dev/packages/flex_color_picker/example with

class _ColorPickerPageState extends State<ColorPickerPage> {
...
@override
  void initState() {
	...
	dialogPickerColor = const Color(0xFF613E42); \\ Set custom color to force wheel
	...
   }

   ...
  Future<bool> colorPickerDialog() async {
    return ColorPicker(
    ...
    enableTonalPalette: true, \\Enable tonal palete
    ...
    ).showPickerDialog(
     ...
    );
   }
}

Then you have to:

• click on color swatch from section ''Click this color to modify it in a dialog..' to open 'Select color' with Wheel dialog active
• select any color from tonal palete
• change tab to primary then you will get an exception:

======== Exception caught by widgets library =======================================================
The following LateError was thrown building ColorPicker(dirty, state: _ColorPickerState#a56bf):
LateInitializationError: Field '_activeColorSwatchList@1082511434' has not been initialized.

The relevant error-causing widget was: 
  ColorPicker ColorPicker:file:///D:/workspace/mobile/ex_app/lib/ag/main.dart:255:12
When the exception was thrown, this was the stack: 
#0      _ColorPickerState._activeColorSwatchList (package:flex_color_picker/src/color_picker.dart)
#1      _ColorPickerState.build (package:flex_color_picker/src/color_picker.dart:1709:42)
#2      StatefulElement.build (package:flutter/src/widgets/framework.dart:5583:27)
#3      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5471:15)
#4      StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5634:11)
#5      Element.rebuild (package:flutter/src/widgets/framework.dart:5187:7)
#6      BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2895:19)
#7      WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:984:21)

Hello, the return type when the color is changed in DialogPicker is a material Color. This has no property of name, which I need to get to show to the user.

I know that you have each color name because you display it in the dialog.

How can I receive the picked color name? Is there a function to change from color to color name?

Thank you!

It can support inputting a mathematical formula and installing the trajectory of the formula to generate a color palette; for example (such as screenshots, one is a linear distribution from the edge of the circle to the center of the circle, and the other is a sinusoidal distribution), for example, the color distribution of the sinusoidal color wheel is Distributed according to a sine function, if it can support mathematical formulas, the color wheel will become very fascinating to the user.

There is a parameter surfaceTintColor which controls color of alert could add to showPickerDialog

I am trying to run the example using the following version of flutter :

Flutter 2.0.6 • channel stable • [email protected]:flutter/flutter.git
Framework • revision 1d9032c7e1 (10 days ago) • 2021-04-29 17:37:58 -0700
Engine • revision 05e680e202
Tools • Dart 2.12.3

And I got this error in iPad Pro Web Google Chrome , But it works fine in iPad Pro Web Safari

I want to know which flutter version you used to build your project in https://rydmike.com/flexcolorpicker/#/ because it is working fine on iPad Pro Web Chrome.

I was wondering if it's possible to expose these two callbacks for the color sliders in a similar manner to the Slider Widget.

An example use case is when the application is keeping track of operations history (undo/redo). With a Slider widget, registering every change can be avoided by doing the following:

Slider(
  onChangeStart: (_) {
    controller.trackChanges = false;
  },
  onChange: (value) {
    controller.updateData(value);
  },
  onChangeEnd: (value) {
    controller.trackChanges = true;
    controller.updateData(value);
  },
)

So it'd be nice to have these two callbacks exposed.

Hi Mike,

Using 2.0.0-nullsafety.2 with Flutter 2.0.0 in iOS, calling showPickerDialog cause the keyboard shows up right away because ColorCodeField is requesting the focus. This only happens when ColorPickerType.wheel: true in pickersEnabled.

Similarly, when the wheel is enabled, it'll be the first tab to be shown even though it's the last one (it could also be caused by the focus request).

by the way, thanks for other fixes. I still didn't get a chance to try them out.

I wanted to thank you for this awesome library and the amount of effort you put in the documentation. The live demo is also incredible and helped us a lot.

You can close this when you read it.

Thank you!

Hi Mick!

Great work BTW!

I have a suggestion regarding the dialog picker.

I'm not fond of the way it is implemented and I would have preferred a "stateless" way of doing things without relying on the onColorChanged callback.

An API like this would feel more natural to me :

Future<Color?> showColorPickerDialog(
   BuildContext context,
   Color? selectedColor,
   /// Picker properties
   /// Same properties as ColorPicker widget
  );

This way I find it more natural to use from a button from example :

Button(
  onTap: () async {
     final newColor = await showColorPickerDialog(context, color, ...);
  }
)

What do you think?

Edit

I understand why you did that: this allows you to update the view behind the picker while shown to the user!

Maybe having the two alternatives would be the best then. :)

When the flag useRootNavigator is used, dialog pop functions needs to respect its usage it as well.

This concerns:

• Built-in dialog bottom action buttons
• Close/OK buttons that can be used in a the dialog, but that are in the ColorPicker widget itself.

See PR #27 for more info and discussion.

For example, the value of actionsPadding is set by default to const EdgeInsets.symmetric(horizontal: 16), but it could use Theme.of(context).dialogTheme.actionsPagging https://api.flutter.dev/flutter/material/DialogTheme/actionsPadding.html

...
enableOpacity: true
...

Unable to load asset: "packages/flex_color_picker/assets/opacity.png".
Exception: Asset not found

Hello,

i have the following code and want to display the dialogActionButtons in the bottom of the dialog. Unfortunately, they will not appear.

showDialog(
        context: context,
        builder: (BuildContext context) {
          return SizedBox(
              width: double.infinity,
              child: LayoutBuilder(builder: (context, constraint) {
                return Padding(
                    padding: const EdgeInsets.all(5.0),
                    child: SingleChildScrollView(
                      child: Card(
                        elevation: 2,
                        child: ColorPicker(
                          color: primaryColor!,
                          onColorChanged: (Color color) {
                             setState(() {
                                    primaryColor = color;
                                  })
                          },
                          width: constraint.smallest.shortestSide * 0.1,
                          height: constraint.smallest.shortestSide * 0.1,
                          actionButtons: const ColorPickerActionButtons(
                            okButton: false,
                            closeButton: false,
                            dialogActionButtons: true,
                          ),
                          pickersEnabled: <ColorPickerType, bool>{
                            ColorPickerType.both: true,
                            ColorPickerType.accent: false,
                            ColorPickerType.primary: false,
                          },
                        ),
                      ),
                    );
              )}));
        }
);

When the wheelWidth is high the cursor inside the wheel get a few problems.

The cursor can get outside of the Square and under the wheel itself. Also is the position only in the middle the same like the mouse position, at the edges it get an offset.

I tested this on:

• Linux
• Android
• Your Web Example (https://rydmike.com/flexcolorpicker/#/)

It looks like the position is calculated without the wheel.

is there a way I can set the default ColorPickerType?

but the wheel is opening by default

but I can't primary to open by default

Some times we use differents animations to show dialogs. Maybe permit or include some animations for color picker dialog will be nice. Thank you.

Edit:
Setting the 'color' property of ColorPicker fixes this issue. This is mentioned under the Screen Color Picker section.

ColorPicker(
  pickersEnabled: const <ColorPickerType, bool>{
    ColorPickerType.wheel: true,
    ColorPickerType.accent: true,
    ColorPickerType.primary: true,,
  },
  color: selectedColor, // Required if using setState in onColorChanged.
  onColorChanged: (Color value) {
    print('Color selected: $value');
    setState(() {
      selectedColor = value;
    });
  },
),

Hello!

I've encountered this weird issue when using setState in the onChanged callback.

As soon as I add the setState call, the picker stops working.
The onChanged callback is called, but the color doesn't change in the UI.

Removing the setState call immediately fixes the issue, and the picker starts working again.

This problem occurs in both my main project, and I've been able to reproduce the issue in a minimal project.
https://github.com/eriksoderstrom/test_color_picker
Tested on iPhone 12 and Pixel 6 physical devices.

class SelectColorPage extends StatefulWidget {
  const SelectColorPage({super.key});
  @override
  State<SelectColorPage> createState() => _SelectColorPageState();
}

class _SelectColorPageState extends State<SelectColorPage> {
  Color selectedColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Select Color'),
      ),
      body: Column(
        children: <Widget>[

          ColorPicker(
            pickersEnabled: const <ColorPickerType, bool>{
              ColorPickerType.wheel: true,
              ColorPickerType.accent: true,
              ColorPickerType.primary: true,
              ColorPickerType.bw: false,
              ColorPickerType.custom: false,
            },
            onColorChanged: (Color value) {
              // This line causes the issue
              print('Color selected: $value');
              setState(() {
                selectedColor = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

Flutter doctor output:

[✓] Flutter (Channel stable, 3.19.1, on macOS 14.2.1 23C71 darwin-x64, locale en-SE)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0-rc1)
[!] Xcode - develop for iOS and macOS (Xcode 15.2)
    ! CocoaPods 1.11.3 out of date (1.13.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
[✓] VS Code (version 1.86.0)
[✓] Connected device (4 available)
[✓] Network resources

! Doctor found issues in 1 category.

The FlexColorScheme ThemesPlayground app has a feature that can generate the code for the configured active viewed package setup and you can copy paste it into your own app.

Add the same feature for the ColorPicker to its web demo app.

Add "advanced" Color Picker with sliders and that can toggle between:

• RGB
• HCT (M3 color space)
• HSL
• HSV
• CMYK
• HSB
• HSLUV https://github.com/bernaferrari/hsluv-dart

Others?

Add option for Hue slider instead of wheel for the "wheel" slider

Hi there,

Is there any way to paste an external color code in the color picker? For example, let's say I've got this color code "0xFF56AB32", and I want to paste color code in the color picker so that I get the same color picked (may be).

Thanks