Custom slider Flutter

Question

I need to make the rounding on the slider smaller than it is by default. How to do it? I found the answer here but it's outdated. I am using Flutter Null safety version. Thank you very much.

Code:

class _SliderVerticalWidgetState extends State<SliderVerticalWidget> {
  double value = 75;

  @override
  Widget build(BuildContext context) {
    final double min = 0;
    final double max = 100;

    return SliderTheme(
      data: SliderThemeData(
        trackHeight: 80,
        thumbShape: SliderComponentShape.noOverlay,
        overlayShape: SliderComponentShape.noOverlay,
        valueIndicatorShape: SliderComponentShape.noOverlay,
        activeTickMarkColor: Colors.transparent,
        inactiveTickMarkColor: Colors.transparent,
      ),
      child: Container(
        height: 200,
        child: Column(
          children: [
            Expanded(
              child: Stack(
                children: [
                  RotatedBox(
                    quarterTurns: 3,
                    child: Slider(
                      value: value,
                      min: min,
                      max: max,
                      divisions: 20,
                      label: value.round().toString(),
                      onChanged: (value) => setState(() => this.value = value),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

try this:

  double percentage = 0.1;
  Widget _slider(double width, double height) {
    return GestureDetector(
      onVerticalDragStart: (details) {
        percentage = (height - details.localPosition.dy) / height;
        setState(() {});
      },
      onVerticalDragUpdate: (details) {
        percentage = (height - details.localPosition.dy) / height;
        setState(() {});
      },
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(width / 2),
          color: Colors.blueGrey,
        ),
        child: Container(
          width: double.infinity,
          height: double.infinity,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(width / 2),
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [
                0.0,
                1 - percentage,
                1 - percentage,
                1.0,
              ],
              colors: const [
                Colors.transparent,
                Colors.transparent,
                Colors.blue,
                Colors.blue,
              ],
            ),
          ),
        ),
      ),
    );
  }