Flutter Triangle Slider Track Shape - flutter

Question

I want to create a slider, like a volume in the windows control panel.

Answer 1

I had found the solution by extending the SliderTrackShape Class and using the class in Slider Theme.
class TriangleTrackShape extends SliderTrackShape {
#override
Rect getPreferredRect({
required RenderBox parentBox,
Offset offset = Offset.zero,
SliderThemeData? sliderTheme,
bool? isEnabled,
bool? isDiscrete,
}) {
final double thumbWidth =
sliderTheme!.thumbShape!.getPreferredSize(true, isDiscrete!).width;
const double trackHeight = 2.0;
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, {
required 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,
);
// Paint color for active and inactive segments of the track. We can also define the colors to be gradient here.
final Paint activePaint = Paint()
..color = Colors.orange
..style = PaintingStyle.fill;
final Paint inactivePaint = Paint()
..color = appLineColor
..style = PaintingStyle.fill;
Paint leftTrackPaint = activePaint;
Paint rightTrackPaint = inactivePaint;
// For LTR/RTL support.
switch (textDirection) {
case TextDirection.ltr:
leftTrackPaint = activePaint;
rightTrackPaint = inactivePaint;
break;
case TextDirection.rtl:
leftTrackPaint = inactivePaint;
rightTrackPaint = activePaint;
break;
}
// Since the triangle resembles the right triangle find the y co-ordinate (height with respect to the selection value, so the path of active and inactive segements can be drawn)
const double trackHeightVariation = 12;
const double trackShiftAlongY = 6; // Shift the track so that the thumb will be placed in the center.
final double trackDistance = (trackRect.right - trackRect.left).abs();
final double customTrackHeight =
(trackRect.bottom - (trackRect.top - trackHeightVariation));
final valuePercent = ((thumbCenter!.dx - trackRect.left) / 1).abs();
final yPoint = ((customTrackHeight / trackDistance) * valuePercent);
final activePathSegment = Path()
..moveTo(trackRect.left, trackRect.bottom + trackShiftAlongY)
..lineTo(trackRect.left, trackRect.top + trackShiftAlongY)
..lineTo(thumbCenter.dx, trackRect.top - yPoint + trackShiftAlongY)
..lineTo(thumbCenter.dx, trackRect.bottom + trackShiftAlongY)
..close();
final inactivePathSegment = Path()
..moveTo(thumbCenter.dx, trackRect.bottom + trackShiftAlongY)
..lineTo(thumbCenter.dx, trackRect.top - yPoint + trackShiftAlongY)
..lineTo(trackRect.right,
trackRect.top - trackHeightVariation + trackShiftAlongY)
..lineTo(trackRect.right, trackRect.bottom + trackShiftAlongY)
..close();
context.canvas.drawPath(activePathSegment, leftTrackPaint);
context.canvas.drawPath(inactivePathSegment, rightTrackPaint);
// If we want shadows to the track or active portion we can define that and draw that.
}
}