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

Author: JCapucho

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(

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