Flutter Border of slider get square when thumb is near

Question

I'm currently having this issue with my slider in my flutter app:

My slider normally has rounded borders: Normal Slider

However, if the thumb gets close to the edges it first gets "squished": Squished slider

and if it gets to the end, it gets completely square: Square slider

It's the same on the other end: Also square.

This is my code:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Heater Control';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State {
  double _currentSliderValue = 20;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Center(
            child: Text(
          _currentSliderValue.toStringAsFixed(1),
          style: const TextStyle(fontSize: 50, fontWeight: FontWeight.bold),
        )),
        Expanded(
          child: RotatedBox(
            quarterTurns: 3,
            child: SliderTheme(
              data: const SliderThemeData(
                  trackHeight: 150,
                  thumbShape: RoundSliderThumbShape(
                      enabledThumbRadius: 10,
                      elevation: 0,
                      pressedElevation: 0,
                      disabledThumbRadius: 5),
                  thumbColor: Colors.white,
                  minThumbSeparation: 10,
                  trackShape: RoundedRectSliderTrackShape()),
              child: Slider(
                value: _currentSliderValue,
                max: 30,
                divisions: 60,

                // label: _currentSliderValue.toString(),
                onChanged: (double value) {
                  setState(
                    () {
                      _currentSliderValue = value;
                    },
                  );
                },
              ),
            ),
          ),
        )
      ],
    );
  }
}

I'm new to flutter, so I don't have any idea on how to fix this. I would really appreciate any help.

Thanks in advance,

Fischchen

user_5941014 · Answer

If you check the source code in RoundedRectSliderTrackShape, you will found that it consists of two RRects(one is to the left of the thumb, and the other is to the right of the thumb).

The topLeft and bottomLeft of the left RRect have given value, while the topRight and bottomRight are zero.The topRight and bottomRight of the right RRect also have given value, while the topLeft and bottomLeft are zero.

When you drag the thumb, those RRects will be repainted.

I think the way to get what you want is to wrap with ClipRRect, and set trackShape to RectangularSliderTrackShape,like below:

ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(12)),
    child: Container(
      height: 38,
      child: SliderTheme(
        data: SliderThemeData(
            trackHeight: 38,
            activeTrackColor: Colors.green,
            inactiveTrackColor: Colors.black,
            thumbShape: SliderComponentShape.noThumb,
            trackShape: RectangularSliderTrackShape(),
            overlayShape: RoundSliderOverlayShape(overlayRadius: 0)),
        child: Slider(
            value: value,
            min: 0,
            max: 100,
            onChanged: (_) {
              setState(() {
                value = _;
              });
            }),
      ),
    ),
  )

Flutter Border of slider get square when thumb is near

1 Answers