just_color_picker 0.4.0

A customizable HSV color picker with circular hue wheel, saturation-value panel, alpha slider, and color conversion utilities. No external dependencies.

just_color_picker

A customizable HSV color picker for Flutter with a circular hue wheel, saturation-value panel, alpha slider, and color conversion utilities. Zero external dependencies — built entirely with CustomPainter.

Features

• Two layout styles — circular wheel or linear bar, switchable via ColorPickerType
• Circular Hue Wheel with embedded SV (Saturation-Value) Panel
• Linear Hue Bar with standalone square SV Panel
• Alpha Slider with checkerboard transparency background
• Color conversion utilities — HEX, RGB, HSL with alpha support
• Uncontrolled and controlled modes
• Fully customizable sizes and visibility toggles

Getting Started

Add the dependency:

dependencies:
  just_color_picker: ^0.4.0

Usage

Wheel Mode (default)

import 'package:just_color_picker/just_color_picker.dart';

JustColorPicker(
  initialColor: Colors.blue,
  onColorChanged: (Color color) {
    // Called continuously during drag
  },
  onColorChangeEnd: (Color color) {
    // Called when drag ends
  },
)

Bar Mode

JustColorPicker(
  type: ColorPickerType.bar,
  initialColor: Colors.blue,
  onColorChanged: (color) {},
)

Controlled Mode

JustColorPicker(
  color: myColor,          // externally managed
  onColorChanged: (color) {
    setState(() => myColor = color);
  },
)

Customization

JustColorPicker(
  initialColor: Colors.red,
  onColorChanged: (color) {},
  type: ColorPickerType.wheel, // wheel or bar
  wheelDiameter: 300,          // wheel / SV panel size
  wheelWidth: 30,              // ring thickness (wheel mode)
  thumbRadius: 10,             // indicator size
  showAlpha: true,             // alpha slider
)

Color Conversion Utilities

// HEX
final hex = colorToHex(color);                        // "FF5733"
final hexAlpha = colorToHex(color, includeAlpha: true); // "80FF5733"
final color = hexToColor('#FF5733');
final valid = isValidHex('#FF5733');

// RGB
final rgb = colorToRgb(color);   // (r: 255, g: 87, b: 51, a: 255)
final color = rgbToColor(255, 87, 51);
final color = rgbToColor(255, 87, 51, 128); // with alpha

// HSL
final hsl = colorToHsl(color);   // (h: 11.0, s: 100.0, l: 60.0, a: 255)
final color = hslToColor(11, 100, 60);
final color = hslToColor(11, 100, 60, 128); // with alpha

Picker Types

ColorPickerType.wheel

Circular hue ring with a saturation-value panel inscribed inside. Classic HSV wheel layout.

ColorPickerType.bar

Square SV panel on top with a horizontal hue bar below it. Compact linear layout.

API

JustColorPicker

Parameter	Type	Default	Description
initialColor	Color?	—	Initial color (uncontrolled mode)
color	Color?	—	Controlled color
onColorChanged	ValueChanged<Color>	required	Real-time color callback
onColorChangeEnd	ValueChanged<Color>?	null	Gesture-end callback
type	ColorPickerType	wheel	Layout style (wheel or bar)
wheelDiameter	double	280.0	Wheel diameter / SV panel size
wheelWidth	double	26.0	Ring thickness (wheel mode only)
showAlpha	bool	true	Show alpha slider
thumbRadius	double	8.0	Thumb indicator radius

Standalone Widgets

These widgets are also exported for custom layouts:

Widget	Description
HueWheel	Circular hue ring with embedded SV panel
HueBar	Horizontal hue spectrum slider
SvPanel	Saturation-value rectangle
AlphaSlider	Opacity slider with checkerboard background

Conversion Utilities

Function	Description
colorToHex(Color, {includeAlpha})	Color → "FF5733"
hexToColor(String)	"#FF5733" → Color?
isValidHex(String)	HEX string validation
colorToRgb(Color)	Color → ({int r, int g, int b, int a})
rgbToColor(int r, int g, int b, [int a])	RGB → Color
colorToHsl(Color)	Color → ({double h, double s, double l, int a})
hslToColor(double h, double s, double l, [int a])	HSL → Color

Example

The example/ directory contains an interactive playground app where you can toggle all options in real time. Run it with:

cd example
flutter run