Merge pull request #4 from GioPan04/main

Line thumb shape

example/lib/main.dart

@@ -33,6 +33,7 @@ class MyHomePage extends StatelessWidget {
           children: [
             AmplitudeSquiggleSlider(),
             WavelengthSquiggleSlider(),
+            LineThumbSquiggleSlider(),
           ],
         ),
       ),
@@ -107,3 +108,38 @@ class _WavelengthSquiggleSliderState extends State<WavelengthSquiggleSlider> {
     );
   }
 }
+
+class LineThumbSquiggleSlider extends StatefulWidget {
+  const LineThumbSquiggleSlider({super.key});
+
+  @override
+  State<LineThumbSquiggleSlider> createState() =>
+      _LineThumbSquiggleSliderState();
+}
+
+class _LineThumbSquiggleSliderState extends State<LineThumbSquiggleSlider> {
+  double _value = 10;
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        const Text('Line thumb'),
+        SquigglySlider(
+          useLineThumb: true,
+          value: _value,
+          min: 0,
+          max: 30,
+          squiggleAmplitude: 7,
+          squiggleWavelength: 10,
+          squiggleSpeed: 0.1,
+          label: 'Line thumb',
+          onChanged: (double value) {
+            setState(() {
+              _value = value;
+            });
+          },
+        ),
+      ],
+    );
+  }
+}

example/pubspec.yaml

@@ -13,7 +13,8 @@ dependencies:
     sdk: flutter
 
   cupertino_icons: ^1.0.2
-  squiggly_slider: ^1.0.0
+  squiggly_slider:
+    path: ..
 
 dev_dependencies:
   flutter_test:

lib/line_thumb_shape.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+/// A variant of the default circle thumb shape
+/// Similar to the one found in Android 13 Media control
+class LineThumbShape extends SliderComponentShape {
+  /// The size of the thumb
+  final Size thumbSize;
+
+  const LineThumbShape({
+    this.thumbSize = const Size(8, 32),
+  });
+
+  @override
+  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
+    return thumbSize;
+  }
+
+  @override
+  void paint(
+    PaintingContext context,
+    Offset center, {
+    required Animation<double> activationAnimation,
+    required Animation<double> enableAnimation,
+    required bool isDiscrete,
+    required TextPainter labelPainter,
+    required RenderBox parentBox,
+    required SliderThemeData sliderTheme,
+    required TextDirection textDirection,
+    required double value,
+    required double textScaleFactor,
+    required Size sizeWithOverflow,
+  }) {
+    assert(sliderTheme.disabledThumbColor != null);
+    assert(sliderTheme.thumbColor != null);
+
+    final colorTween = ColorTween(
+      begin: sliderTheme.disabledThumbColor,
+      end: sliderTheme.thumbColor,
+    );
+
+    final paint = Paint()..color = colorTween.evaluate(enableAnimation)!;
+
+    context.canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromCenter(
+          center: center,
+          width: thumbSize.width,
+          height: thumbSize.height,
+        ),
+        Radius.circular(thumbSize.width),
+      ),
+      paint,
+    );
+  }
+}

lib/slider.dart

@@ -1,6 +1,7 @@
 library slider;
 
 import 'package:flutter/material.dart';
+import 'line_thumb_shape.dart';
 import 'squiggly_slider_track_shape.dart';
 
 /// A Material Design Squiggly [Slider].
@@ -100,6 +101,7 @@ class SquigglySlider extends Slider {
     this.squiggleAmplitude = 0.0,
     this.squiggleWavelength = 0.0,
     this.squiggleSpeed = 1.0,
+    this.useLineThumb = false,
   });
 
   /// The amplitude of the squiggle.
@@ -111,6 +113,9 @@ class SquigglySlider extends Slider {
   /// The speed of the squiggle in waves per second.
   final double squiggleSpeed;
 
+  /// Use the Android 13's like slider thumb
+  final bool useLineThumb;
+
   @override
   State<SquigglySlider> createState() => _SquigglySliderState();
 }
@@ -158,6 +163,7 @@ class _SquigglySliderState extends State<SquigglySlider>
                 ? 1 - phaseController.value
                 : phaseController.value,
           ),
+          thumbShape: widget.useLineThumb ? const LineThumbShape() : null,
         ),
         child: Slider(
           key: widget.key,