How to make cubic like shape in flutter Slide

Question

I want to make a Custom shape in the slider Shape of cubic in a flutter. For Rotation, I used the Rotated Box Widget to Change the rotation. and then quarter to 7. I tried to make the widget but the UI is not according to as I desire. I want to make a custom shape like this.

I obtained it like this

Here is the Code i Did

class CustomSliderThumbRect extends SliderComponentShape {
  final double thumbRadius;
  final thumbHeight;
  final int min;
  final int max;

  const CustomSliderThumbRect({
    this.thumbRadius,
    this.thumbHeight,
    this.min,
    this.max,
  });

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size.fromRadius(thumbRadius);
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    Animation<double> activationAnimation,
    Animation<double> enableAnimation,
    bool isDiscrete,
    TextPainter labelPainter,
    RenderBox parentBox,
    SliderThemeData sliderTheme,
    TextDirection textDirection,
    double value,
    double textScaleFactor,
    Size sizeWithOverflow,
  }) {
    //Get the context of canvas
    final Canvas canvas = context.canvas;
//

    final rRect = RRect.fromRectAndRadius(
      Rect.fromCenter(
          center: center, width: thumbHeight * 1.2, height: thumbHeight * .6),
      Radius.circular(thumbRadius * .4),
    );

    final paint = Paint()
      ..color = sliderTheme.activeTrackColor //Thumb Background Color
      ..style = PaintingStyle.fill;

    TextSpan span = new TextSpan(
        style: new TextStyle(
            fontSize: thumbHeight * .3,
            fontWeight: FontWeight.w700,
            color: sliderTheme.thumbColor,
            height: 1),
        text: '${getValue(value)}');
    TextPainter tp = new TextPainter(
        text: span,
        textAlign: TextAlign.left,
        textDirection: TextDirection.ltr);
    tp.layout();
    Offset textCenter =
        Offset(center.dx - (tp.width / 2), center.dy - (tp.height / 2));

    canvas.drawRRect(rRect, paint);
    tp.paint(canvas, textCenter);
  }

  String getValue(double value) {
    return (min + (max - min) * value).round().toString();
  }
}

Use it Like

SliderTheme(
                data: SliderTheme.of(context).copyWith(
                  activeTrackColor: Colors.red[700],
                  inactiveTrackColor: Colors.red[100],
                  trackShape: RoundedRectSliderTrackShape(),
                  trackHeight: 4.0,
                  thumbColor: Colors.redAccent,
                  thumbShape: CustomSliderThumbRect(
                      thumbHeight: 40, thumbRadius: 10, min: 0, max: 100),
                  overlayColor: Colors.red.withAlpha(32),
                  overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
                  tickMarkShape: RoundSliderTickMarkShape(),
                  // activeTickMarkColor: Colors.red[700],
                  // inactiveTickMarkColor: Colors.red[100],
                  valueIndicatorShape: PaddleSliderValueIndicatorShape(),
                  valueIndicatorColor: Colors.redAccent,
                  valueIndicatorTextStyle: TextStyle(
                    color: Colors.white,
                  ),
                ),
                child: Slider(
                  value: _currentSliderValue,
                  min: 0,
                  max: 100,
                  divisions: 4,
                  label: _currentSliderLabel.toString(),
                  onChanged: (double value) {
                    print(
                        'This is the Current Slider Label ${_currentSliderLabel.toString()}');
                    setState(() {
                      _currentSliderValue = value;
                      if (value == 25) {
                        _currentSliderLabel = 'Year';
                      } else if (value == 50) {
                        _currentSliderLabel = 'Month';
                      } else if (value == 75) {
                        _currentSliderLabel = 'Week';
                      } else if (value == 100) {
                        _currentSliderLabel = 'Today';
                      } else if (value == 0) {
                        _currentSliderLabel = 'OverAll';
                      }
                    });
                  },
                ),
              ),