just_color_picker #

A customizable HSV color picker for Flutter with a circular hue wheel, saturation-value panel, alpha slider, HEX/RGB/HSL input fields, and a themeable input system. 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
• HEX / RGB / HSL Input fields with bidirectional sync
• HEX / RGB / HSL color info display
• Input theme system — customize text style, label style, decoration, cursor color, spacing, and field width via ColorPickerInputThemeData
• Uncontrolled and controlled modes
• Fully customizable sizes and visibility toggles

Getting Started #

Add the dependency:

dependencies:
  just_color_picker: ^0.3.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
  showHexInput: true,          // HEX text field
  showColorInfo: true,         // HEX/RGB display
  showPreview: true,           // color swatch
)

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 #

ColorPickerType #

Standalone Widgets #

These widgets are also exported for custom layouts:

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