From 8f02ed7a25c7bc80160cd942007ed36c29de20d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Capucho?= <jcapucho7@gmail.com>
Date: Thu, 4 Aug 2022 13:52:45 +0100
Subject: [PATCH 1/2] Fix hue ring rendering outside of it's bounds

The hue ring was rendering outside of it's bounds because drawCircle
draws the stroke width half before the radius and the other half after.

This commit fixes that by subtracting half the stroke width from the
radius.

HueRingPicker was adjusted to retain it's previous UI and to allow for
larger stroke widths without clipping
---
 lib/src/colorpicker.dart | 20 +++++++++++---------
 lib/src/palette.dart     |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/lib/src/colorpicker.dart b/lib/src/colorpicker.dart
index 26374ef..4809176 100644
--- a/lib/src/colorpicker.dart
+++ b/lib/src/colorpicker.dart
@@ -4,6 +4,8 @@
 
 library hsv_picker;
 
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'palette.dart';
 import 'utils.dart';
@@ -697,11 +699,11 @@ class _HueRingPickerState extends State<HueRingPicker> {
           ClipRRect(
             borderRadius: widget.pickerAreaBorderRadius,
             child: Padding(
-              padding: const EdgeInsets.all(15),
+              padding: const EdgeInsets.all(5),
               child: Stack(alignment: AlignmentDirectional.center, children: <Widget>[
                 SizedBox(
-                  width: widget.colorPickerHeight,
-                  height: widget.colorPickerHeight,
+                  width: widget.colorPickerHeight + widget.hueRingStrokeWidth,
+                  height: widget.colorPickerHeight + widget.hueRingStrokeWidth,
                   child: ColorPickerHueRing(
                     currentHsvColor,
                     onColorChanging,
@@ -710,8 +712,8 @@ class _HueRingPickerState extends State<HueRingPicker> {
                   ),
                 ),
                 SizedBox(
-                  width: widget.colorPickerHeight / 1.6,
-                  height: widget.colorPickerHeight / 1.6,
+                  width: (widget.colorPickerHeight - widget.hueRingStrokeWidth) / 1.45,
+                  height: (widget.colorPickerHeight - widget.hueRingStrokeWidth) / 1.45,
                   child: ColorPickerArea(currentHsvColor, onColorChanging, PaletteType.hsv),
                 )
               ]),
@@ -770,16 +772,16 @@ class _HueRingPickerState extends State<HueRingPicker> {
           ClipRRect(
             borderRadius: widget.pickerAreaBorderRadius,
             child: Padding(
-              padding: const EdgeInsets.all(15),
+              padding: const EdgeInsets.all(5),
               child: Stack(alignment: AlignmentDirectional.topCenter, children: <Widget>[
                 SizedBox(
-                  width: widget.colorPickerHeight - widget.hueRingStrokeWidth * 2,
-                  height: widget.colorPickerHeight - widget.hueRingStrokeWidth * 2,
+                  width: widget.colorPickerHeight - widget.hueRingStrokeWidth,
+                  height: widget.colorPickerHeight - widget.hueRingStrokeWidth,
                   child: ColorPickerHueRing(currentHsvColor, onColorChanging, strokeWidth: widget.hueRingStrokeWidth),
                 ),
                 Column(
                   children: [
-                    SizedBox(height: widget.colorPickerHeight / 8.5),
+                    SizedBox(height: widget.colorPickerHeight / 8.5 + widget.hueRingStrokeWidth / 2),
                     ColorIndicator(currentHsvColor),
                     const SizedBox(height: 10),
                     ColorPickerInput(
diff --git a/lib/src/palette.dart b/lib/src/palette.dart
index 81f34c4..213372f 100644
--- a/lib/src/palette.dart
+++ b/lib/src/palette.dart
@@ -526,7 +526,7 @@ class HueRingPainter extends CustomPainter {
   void paint(Canvas canvas, Size size) {
     Rect rect = Offset.zero & size;
     Offset center = Offset(size.width / 2, size.height / 2);
-    double radio = size.width <= size.height ? size.width / 2 : size.height / 2;
+    double radio = (size.width <= size.height ? size.width / 2 : size.height / 2) - strokeWidth / 2;
 
     final List<Color> colors = [
       const HSVColor.fromAHSV(1.0, 360.0, 1.0, 1.0).toColor(),

From 689eb4d99c8b3859cadf022dd10ae61b10ca6b20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Capucho?= <jcapucho7@gmail.com>
Date: Thu, 4 Aug 2022 13:59:37 +0100
Subject: [PATCH 2/2] Fix hue ring thumb not scaling with stroke width

---
 lib/src/palette.dart | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/lib/src/palette.dart b/lib/src/palette.dart
index 213372f..63a92d5 100644
--- a/lib/src/palette.dart
+++ b/lib/src/palette.dart
@@ -550,10 +550,19 @@ class HueRingPainter extends CustomPainter {
       center.dx + radio * cos((hsvColor.hue * pi / 180)),
       center.dy - radio * sin((hsvColor.hue * pi / 180)),
     );
-    canvas.drawShadow(Path()..addOval(Rect.fromCircle(center: offset, radius: 12)), Colors.black, 3.0, true);
+    canvas.drawShadow(
+      Path()
+        ..addOval(Rect.fromCircle(
+          center: offset,
+          radius: strokeWidth / 2 + strokeWidth * 0.1,
+        )),
+      Colors.black,
+      3.0,
+      true,
+    );
     canvas.drawCircle(
       offset,
-      size.height * 0.04,
+      strokeWidth / 1.8,
       Paint()
         ..color = Colors.white
         ..style = PaintingStyle.fill,
@@ -561,7 +570,7 @@ class HueRingPainter extends CustomPainter {
     if (displayThumbColor) {
       canvas.drawCircle(
         offset,
-        size.height * 0.03,
+        strokeWidth / 2 - strokeWidth * 0.1,
         Paint()
           ..color = hsvColor.toColor()
           ..style = PaintingStyle.fill,