itome / flutter_circle_color_picker

A beautiful circle color picker for flutter.

flutter_circle_color_picker

A beautiful circle color picker for flutter. Online Demo

Light theme	Dark Theme

Usage

...
        body: Center(
          child: CircleColorPicker(
            initialColor: Colors.blue,
            onChanged: (color) => print(color),
            size: const Size(240, 240),
            strokeWidth: 4,
            thumbSize: 36,
          ),
        ),
...

API

  /// Called during a drag when the user is selecting a color.
  ///
  /// This callback called with latest color that user selected.
  final ValueChanged<Color> onChanged;

  /// Called when drag ended.
  ///
  /// This callback called with latest color that user selected.
  final ValueChanged<Color>? onEnded;

  /// An object to controll picker color dynamically.
  ///
  /// Provide initialColor if needed.
  final CircleColorPickerController? controller;

  /// The size of widget.
  /// Draggable area is thumb widget is included to the size,
  /// so circle is smaller than the size.
  ///
  /// Default value is 280 x 280.
  final Size size;

  /// The width of circle border.
  ///
  /// Default value is 2.
  final double strokeWidth;

  /// The size of thumb for circle picker.
  ///
  /// Default value is 32.
  final double thumbSize;

  /// Text style config
  ///
  /// Default value is Black
  final TextStyle textStyle;

  /// Widget builder that show color code section.
  /// This functions is called every time color changed.
  ///
  /// Default is Text widget that shows rgb strings;
  final ColorCodeBuilder colorCodeBuilder;

flutter_circle_color_picker's Issues

Cant pan inside scroll view

When I put color picker into a scroll view and try to pan the scroll is triggered.

How to return color value on onChangeEnd?

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),
      ),
    );
  }
}

Less an issue than a feature request

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?

Color of thumb circle not equals underlying color

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?

The color selected does not match the color ring

Make hex code editable

Would be great, if the user could edit the displayed hex code if he knows the exact code

Flutter Web displaying single color for entire ring

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

Plans for null safety?

Are there any plans for creating a null-safe version of this package? If so, is there an approximate timeline? Thanks!

Initial Color not being used

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),
              ]
            ),

Request: Change color from external widget

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?

Flutter Web issue.

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

Request: Option for custom text

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?

pub.dev is still 0.1.1

I have seen some commits about customizing textStyle etc but this is not yet on pub.dev.
Any news?