hue_craft 0.0.8 hue_craft: ^0.0.8 copied to clipboard
You can build your own custom color pickers easily with this package
hue_craft #
A simple package for building custom color pickers in Flutter
Examples #
Widgets Included #
- HorizontalHuePicker
- VerticalHuePicker
- HorizontalOpacityPicker
- VerticalOpacityPicker
- SaturationValuePicker
If you want to build a custom thumb (or selector) for the widgets provided with this package, you can do so by implementing the CustomPainter class. This allows you to design a thumb that matches your unique style. To do this:
- Create a class, e.g., CustomThumb, that extends CustomPainter.
- Implement the paint and shouldRepaint methods to define the appearance of your thumb (or selector).
class SquareThumbPainter extends CustomPainter {
final double width;
final double height;
final Color squareColor;
final double borderWidth;
SquareThumbPainter({
required this.width,
required this.height,
required this.squareColor,
this.borderWidth = 2.0,
});
@override
void paint(Canvas canvas, Size size) {
final Paint fillPaint = Paint()..color = squareColor;
final Paint borderPaint = Paint()
..color = Colors.white
..style = PaintingStyle.stroke
..strokeWidth = borderWidth;
final Rect rect = Rect.fromCenter(
center: Offset(size.width / 2, size.height / 2),
width: width,
height: height,
);
canvas.drawRect(rect, fillPaint);
canvas.drawRect(rect, borderPaint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Now you can pass its instance to any widget provided with this package. For example:
HorizontalHuePicker(
customThumbPainter: SquareThumbPainter(...),
...
)
You can do the same with rest of the widgets.