Use Case: User wants to see how a certain color code looks like. So he enters, e.g., a hex code and the color picker should show this color.

Is it possible to inject a Color value to the picker?

Currently the color picker text shows the hex value of the chosen color, which, indeed, is a very useful default. But it would be great to get the possibility to change (maybe for showing RGB or HSL values) or even remove this text. Furthermore, with a custom text you could add a custom TextStyle for better app integration.

Is is this possible yet? Or is there a chance to add a text attribute?

As you can see at these screenshots, and even in your demo videos, in the range of light green and red, the thumb has not the same color as the underlying color of the circle (it is turqoise and pink instead). Maybe there's a slight shift of the hue values?

Awesome project! I want to use it for sending one end color. Right now it returns the value on dragging, is there a way to make it only returns a value when the drag finished(onPanEnd)? Thank you!

class _ColorPicker extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircleColorPicker(
        initialColor: Colors.blue,
        onChanged: (color) => print(color),
        size: const Size(300, 300),
        strokeWidth: 8,
        thumbSize: 35,
        textStyle: TextStyle(fontSize: 0),
      ),
    );
  }
}

I am receiving the following in Flutter Web, I'm running the latest beta as of today 5/4/20.

This is running the example after cloning the repo and I have done flutter pub get.

══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════

The following UnimplementedError was thrown during a scheduler callback:

UnimplementedError

When the exception was thrown, this was the stack:

dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 195:49 throw

lib/_engine/engine/shader.dart 52:5 createPaintStyle

lib/_engine/engine/bitmap_canvas.dart 213:23 [_applyPaint]

lib/_engine/engine/bitmap_canvas.dart 338:5 drawCircle

lib/_engine/engine/surface/recording_canvas.dart 983:11 apply

lib/_engine/engine/surface/recording_canvas.dart 79:18 apply

lib/_engine/engine/surface/picture.dart 268:35 paintCallback

lib/_engine/engine/surface/surface.dart 72:14 commitScene

lib/_engine/engine/surface/scene_builder.dart 550:5 build

packages/flutter/src/rendering/layer.dart 808:35 buildScene

packages/flutter/src/rendering/view.dart 230:36 compositeFrame

packages/flutter/src/rendering/binding.dart 406:18 drawFrame

packages/flutter/src/widgets/binding.dart 884:13 drawFrame

packages/flutter/src/rendering/binding.dart 284:5 [_handlePersistentFrameCallback]

packages/flutter/src/scheduler/binding.dart 1113:15 [_invokeFrameCallback]

packages/flutter/src/scheduler/binding.dart 1052:9 handleDrawFrame

packages/flutter/src/scheduler/binding.dart 861:7

dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 50:19 internalCallback

════════════════════════════════════════════════════════════════════════════════ ════════════════════

Another exception was thrown: UnimplementedError

Another exception was thrown: PersistedOffset: is in an unexpected state.

Flutter Doctor -v returns... [✓] Flutter (Channel beta, v1.17.0-3.4.pre, on Mac OS X 10.15.4 19E287, locale en-US) • Flutter version 1.17.0-3.4.pre at /Users/jody/flutter/flutter • Framework revision e6b34c2b5c (2 days ago), 2020-05-02 11:39:18 -0700 • Engine revision 540786dd51 • Dart version 2.8.1

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2) • Android SDK at /Users/jody/Library/Android/sdk • Platform android-29, build-tools 29.0.2 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.4.1, Build version 11E503a • CocoaPods version 1.9.0

[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.6) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 45.1.1 • Dart plugin version 192.7761 • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code (version 1.44.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.10.1

[✓] Connected device (3 available) • iPhone 8 Plus • D35F92EE-B051-455F-B0C0-EED7EE4225DE • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-4 (simulator) • Chrome • chrome • web-javascript • Google Chrome 81.0.4044.129 • Web Server • web-server • web-javascript • Flutter Tools

Here is some code and a screen shot showing by usage. You can see in the picture that the container I put on the page is filled with the same value that I've set the intialColor value to but the control is not showing the color that was set.

 Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  'Away Color',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  )
                ),
                CircleColorPicker(
                  initialColor: awayPickerColor,
                  onChanged: (color) => changeAwayColor(color),
                  size: const Size(240, 240),
                  strokeWidth: 4,
                  thumbSize: 36,
                ),
                Container(width:100, height:20, color: awayPickerColor),
              ]
            ),

@itome I love the simplicity of your widget.

In my case though, I need to be able to "capture" clicks so I know when the user has finished with the widget and is ready to close the overlay, so I've added an optional onTap callback for the centre circle, and moved from a Container() to an InkWell() so that there's a splash effect when the circle is clicked (but only if there's an onTap callback).

Would it be crazy to implement a pick color by hex code feature, like users could tap the code to open a field and type a new one? Or would you be open to a pull request along those lines?

Added disableLightnessSlider and disableColorCode attributes to determine whether or not those Widgets should render. I am using this package to control an RGB LED and the lightness slider isn't needed and also the hex code may be confusing to some users.

CircleColorPicker( initialColor: Colors.blue, onChanged: (color) => {selectedColor = color}, size: const Size(240, 240), strokeWidth: 4, thumbSize: 36, )