Refactor slider component and add second example

dahliaOS · Jan 31, 2024 · c15ba3f · c15ba3f
1 parent 5fab511
commit c15ba3f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 22 deletions.
diff --git a/example/lib/pages/slider.dart b/example/lib/pages/slider.dart
@@ -9,21 +9,34 @@ class SliderExample extends StatefulWidget {
 
 class _SliderExampleState extends State<SliderExample> {
   double value = 0.5;
+  double value2 = 0.5;
 
   @override
   Widget build(BuildContext context) {
-    return Center(
-      child: Padding(
-        padding: const EdgeInsets.all(32.0),
-        child: ZenitSlider(
-          divisions: 10,
-          onChanged: (val) {
-            setState(() {
-              value = val;
-            });
-          },
-          value: value,
-        ),
+    return Padding(
+      padding: const EdgeInsets.all(32.0),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          ZenitSlider(
+            divisions: 10,
+            onChanged: (val) {
+              setState(() {
+                value = val;
+              });
+            },
+            value: value,
+          ),
+          const SizedBox(height: 32),
+          ZenitSlider(
+            onChanged: (val) {
+              setState(() {
+                value2 = val;
+              });
+            },
+            value: value2,
+          ),
+        ],
       ),
     );
   }

diff --git a/lib/src/components/slider/slider.dart b/lib/src/components/slider/slider.dart
@@ -5,21 +5,17 @@ class ZenitSlider extends StatefulWidget {
   final double value;
   final ValueChanged<double> onChanged;
 
-  final Color? activeColor;
   final int? divisions;
-  final Color? trackColor;
   final MouseCursor? mouseCursor;
-  final Color? thumbColor;
+  final ZenitSliderTheme? sliderTheme;
 
   const ZenitSlider({
     super.key,
     required this.value,
     required this.onChanged,
-    this.activeColor,
     this.divisions,
-    this.trackColor,
     this.mouseCursor,
-    this.thumbColor,
+    this.sliderTheme,
   }) : assert(
           value >= 0.0 && value <= 1.0 && divisions == null ||
               divisions != null && divisions > 0 && divisions <= 100,
@@ -34,7 +30,7 @@ class _ZenitSliderState extends State<ZenitSlider> {
 
   @override
   Widget build(BuildContext context) {
-    final sliderTheme = ZenitTheme.sliderTheme(context);
+    final sliderTheme = widget.sliderTheme ?? ZenitTheme.sliderTheme(context);
     double newValue = widget.value;
     final double divident = 1 / (widget.divisions ?? 1);
     return LayoutBuilder(
@@ -62,9 +58,9 @@ class _ZenitSliderState extends State<ZenitSlider> {
               },
               child: CustomPaint(
                 painter: _SliderPainter(
-                  trackColor: widget.trackColor ?? sliderTheme.trackColor,
-                  activeColor: widget.activeColor ?? sliderTheme.activeTrackColor,
-                  thumbColor: widget.thumbColor ?? sliderTheme.thumbColor,
+                  trackColor: sliderTheme.trackColor,
+                  activeColor: sliderTheme.activeTrackColor,
+                  thumbColor: sliderTheme.thumbColor,
                   hover: hover,
                   hoverColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.05),
                   outlineColor: sliderTheme.outlineColor,

diff --git a/lib/src/theme/theme.dart b/lib/src/theme/theme.dart
@@ -28,6 +28,7 @@ mixin ZenitTheme {
       trackColor: theme.colorScheme.surface,
       thumbColor: theme.colorScheme.onPrimary,
       outlineColor: theme.colorScheme.outline,
+      dividerColor: theme.colorScheme.outline,
     );
   }
 
@@ -262,25 +263,29 @@ class ZenitSliderTheme {
   final Color trackColor;
   final Color outlineColor;
   final Color thumbColor;
+  final Color dividerColor;
 
   const ZenitSliderTheme({
     required this.activeTrackColor,
     required this.trackColor,
     required this.outlineColor,
     required this.thumbColor,
+    required this.dividerColor,
   });
 
   ZenitSliderTheme copyWith({
     Color? activeTrackColor,
     Color? trackColor,
     Color? outlineColor,
     Color? thumbColor,
+    Color? dividerColor,
   }) {
     return ZenitSliderTheme(
       activeTrackColor: activeTrackColor ?? this.activeTrackColor,
       trackColor: trackColor ?? this.trackColor,
       outlineColor: outlineColor ?? this.outlineColor,
       thumbColor: thumbColor ?? this.thumbColor,
+      dividerColor: dividerColor ?? this.dividerColor,
     );
   }
 }