Flutter How to create a Curved Slider? - flutter

Question

This is an image I found on Stackoverflow only and I want a Slider shaped like this. I tried packages like sleek_circular_slider and other packages but I was not able to create this shape.
I can create this shape in CustomPainter and when I tried to use SliderTrackShape to customize the SLider Shape it didn't worked.
class CustomSlider extends SliderTrackShape {
#override
Rect getPreferredRect({
RenderBox? parentBox,
Offset offset = Offset.zero,
SliderThemeData? sliderTheme,
bool? isEnabled,
bool? isDiscrete,
}) {
final double thumbWidth =
sliderTheme!.thumbShape!.getPreferredSize(true, isDiscrete!).width;
final double? trackHeight = sliderTheme.trackHeight;
assert(thumbWidth >= 0);
assert(trackHeight! >= 0);
assert(parentBox!.size.width >= thumbWidth);
assert(parentBox!.size.height >= trackHeight!);
final double trackLeft = offset.dx + thumbWidth / 2;
final double trackTop =
offset.dy + (parentBox!.size.height - trackHeight!) / 2;
final double trackWidth = parentBox.size.width - thumbWidth;
return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
}
#override
void paint(
PaintingContext context,
Offset offset, {
RenderBox? parentBox,
SliderThemeData? sliderTheme,
Animation<double>? enableAnimation,
TextDirection? textDirection,
Offset? thumbCenter,
bool? isDiscrete,
bool? isEnabled,
}) {
if (sliderTheme!.trackHeight == 0) {
return;
}
final Rect trackRect = getPreferredRect(
parentBox: parentBox,
offset: offset,
sliderTheme: sliderTheme,
isEnabled: isEnabled,
isDiscrete: isDiscrete,
);
final Paint fillPaint = Paint()
..color = sliderTheme.activeTrackColor!
..style = PaintingStyle.fill;
final Paint borderPaint = Paint()
..color = Colors.black
..strokeWidth = 4.0
..style = PaintingStyle.stroke;
final pathSegment = Path()
..moveTo(0, 2500)
..quadraticBezierTo(250 / 2, 250, 250, 250 / 2);
context.canvas.drawPath(pathSegment, fillPaint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
This code renders just the thumb shape and no slider when I use this widget inside tracakShape for SliderTheme. But when I use similar code for CustomShape I am able to create this shape successfully like this :
class CustomSlider extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Color(0xff84CADE);
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 4.0;
Path path = Path();
path.moveTo(0, size.height / 2);
path.quadraticBezierTo(size.width / 2, size.height, size.width, size.height / 2);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
So I guess my question is how can I render this shape that I am succesfully rendering when I am extending from SliderTrackShape as I am unable to do so when trying to extend from SliderTrackShape class and create this shape.