Expose some decoration properties for PaletteHuePicker (#22)

fluttercandies · Aug 26, 2023 · 575d3b6 · 575d3b6
1 parent f14aca5
commit 575d3b6
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 25 deletions.
diff --git a/lib/src/color_picker.dart b/lib/src/color_picker.dart
@@ -228,14 +228,18 @@ class _ColorPickerState extends State<ColorPicker> {
           Container(
             width: 32,
             height: 32,
-            decoration: BoxDecoration(
+            decoration: const BoxDecoration(
               shape: BoxShape.circle,
-              border: Border.all(color: Colors.black26),
+              border: Border.fromBorderSide(
+                BorderSide(color: Colors.black26),
+              ),
             ),
             child: DecoratedBox(
               decoration: BoxDecoration(
                 shape: BoxShape.circle,
-                border: Border.all(color: Colors.white, width: 3),
+                border: const Border.fromBorderSide(
+                  BorderSide(color: Colors.white, width: 3),
+                ),
                 color: _color,
               ),
             ),

diff --git a/lib/src/pickers/palette_hue_picker.dart b/lib/src/pickers/palette_hue_picker.dart
@@ -8,11 +8,28 @@ class PaletteHuePicker extends StatefulWidget {
   const PaletteHuePicker({
     required this.color,
     required this.onChanged,
+    this.paletteHeight = 280.0,
+    this.palettePadding = const EdgeInsets.symmetric(
+      horizontal: 12,
+      vertical: 20,
+    ),
+    this.hueBorder,
+    this.hueBorderRadius,
+    this.hueHeight,
+    this.paletteBorder,
+    this.paletteBorderRadius,
     Key? key,
   }) : super(key: key);
 
   final HSVColor color;
   final ValueChanged<HSVColor> onChanged;
+  final double paletteHeight;
+  final EdgeInsets palettePadding;
+  final Border? hueBorder;
+  final double? hueHeight;
+  final BorderRadius? hueBorderRadius;
+  final Border? paletteBorder;
+  final BorderRadius? paletteBorderRadius;
 
   @override
   _PaletteHuePickerState createState() => _PaletteHuePickerState();
@@ -57,10 +74,12 @@ class _PaletteHuePickerState extends State<PaletteHuePicker> {
       children: <Widget>[
         // Palette
         SizedBox(
-          height: 280.0,
+          height: widget.paletteHeight,
           child: Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 20),
+            padding: widget.palettePadding,
             child: PalettePicker(
+              border: widget.paletteBorder,
+              borderRadius: widget.paletteBorderRadius,
               position: Offset(color.saturation, color.value),
               onChanged: saturationValueOnChange,
               leftRightColors: saturationColors,
@@ -74,6 +93,9 @@ class _PaletteHuePickerState extends State<PaletteHuePicker> {
         // Slider
         SliderPicker(
           max: 360.0,
+          border: widget.hueBorder,
+          borderRadius: widget.hueBorderRadius,
+          height: widget.hueHeight,
           value: color.hue,
           onChanged: hueOnChange,
           colors: hueColors,

diff --git a/lib/src/pickers/swatches_picker.dart b/lib/src/pickers/swatches_picker.dart
@@ -38,7 +38,9 @@ class _SwatchesPickerState extends State<SwatchesPicker>
       decoration: BoxDecoration(
         color: item,
         shape: BoxShape.circle,
-        border: Border.all(color: Colors.grey),
+        border: const Border.fromBorderSide(
+          BorderSide(color: Colors.grey),
+        ),
       ),
       child: InkWell(
         borderRadius: const BorderRadius.all(

diff --git a/lib/src/widgets/palette_picker.dart b/lib/src/widgets/palette_picker.dart
@@ -11,9 +11,13 @@ class PalettePicker extends StatefulWidget {
     this.rightPosition = 1.0,
     this.topPosition = 0.0,
     this.bottomPosition = 1.0,
+    this.border = const Border.fromBorderSide(BorderSide(color: Colors.grey)),
+    this.borderRadius = const BorderRadius.all(Radius.circular(6)),
     Key? key,
   }) : super(key: key);
 
+  final Border? border;
+  final BorderRadius? borderRadius;
   final Offset position;
   final ValueChanged<Offset> onChanged;
   final double leftPosition;
@@ -96,10 +100,8 @@ class _PalettePickerState extends State<PalettePicker> {
   Widget buildLeftRightColors() {
     return Container(
       decoration: BoxDecoration(
-        border: Border.all(color: Colors.grey),
-        borderRadius: const BorderRadius.all(
-          Radius.circular(6),
-        ),
+        border: widget.border,
+        borderRadius: widget.borderRadius,
         gradient: LinearGradient(
           colors: widget.leftRightColors,
         ),
@@ -110,10 +112,8 @@ class _PalettePickerState extends State<PalettePicker> {
   Widget buildTopBottomColors() {
     return Container(
       decoration: BoxDecoration(
-        border: Border.all(color: Colors.grey),
-        borderRadius: const BorderRadius.all(
-          Radius.circular(6),
-        ),
+        border: widget.border,
+        borderRadius: widget.borderRadius,
         gradient: LinearGradient(
           begin: Alignment.topCenter,
           end: Alignment.bottomCenter,

diff --git a/lib/src/widgets/slider_picker.dart b/lib/src/widgets/slider_picker.dart
@@ -9,10 +9,15 @@ class SliderPicker extends StatefulWidget {
     this.max = 1.0,
     this.colors,
     this.child,
+    this.borderRadius = _SliderPickerState._defaultBorderRadius,
+    this.border = const Border.fromBorderSide(BorderSide(color: Colors.grey)),
+    this.height = 40.0,
     Key? key,
   })  : assert(value >= min && value <= max),
         super(key: key);
-
+  final Border? border;
+  final double? height;
+  final BorderRadius? borderRadius;
   final double value;
   final ValueChanged<double> onChanged;
   final double min;
@@ -25,6 +30,8 @@ class SliderPicker extends StatefulWidget {
 }
 
 class _SliderPickerState extends State<SliderPicker> {
+  static const _defaultBorderRadius = BorderRadius.all(Radius.circular(20.0));
+
   double get value => widget.value;
   double get min => widget.min;
   double get max => widget.max;
@@ -42,10 +49,6 @@ class _SliderPickerState extends State<SliderPicker> {
     super.setState(() => setRatio(ratio));
   }
 
-  BorderRadius radius = const BorderRadius.all(
-    Radius.circular(20.0),
-  );
-
   Widget buildSlider(double maxWidth) {
     return SizedBox(
       width: maxWidth,
@@ -61,11 +64,11 @@ class _SliderPickerState extends State<SliderPicker> {
                 // Child
                 DecoratedBox(
                     decoration: BoxDecoration(
-                      borderRadius: radius,
-                      border: Border.all(color: Colors.grey),
+                      borderRadius: widget.borderRadius,
+                      border: widget.border,
                     ),
                     child: ClipRRect(
-                      borderRadius: radius,
+                      borderRadius: widget.borderRadius ?? _defaultBorderRadius,
                       child: widget.child,
                     ),
                   )
@@ -74,8 +77,8 @@ class _SliderPickerState extends State<SliderPicker> {
                 // Color
                 DecoratedBox(
                     decoration: BoxDecoration(
-                      borderRadius: radius,
-                      border: Border.all(color: Colors.grey),
+                      borderRadius: widget.borderRadius,
+                      border: widget.border,
                       gradient: LinearGradient(colors: widget.colors!),
                     ),
                   ),
@@ -117,7 +120,7 @@ class _SliderPickerState extends State<SliderPicker> {
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      height: 40.0,
+      height: widget.height,
       child: LayoutBuilder(
         builder: (BuildContext context, BoxConstraints box) =>
             buildSlider(box.maxWidth),