1

I have used flutter slider with RectangularSliderValueIndicatorShape() and the output is

enter image description here

How can I convert the indicator shape to rounded edges

Expected: enter image description here

Code for the value indicator shape is:-


class ShowIndicator extends RoundSliderThumbShape {
  final _indicatorShape = const RectangularSliderValueIndicatorShape();

  ShowIndicator();

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    required bool isDiscrete,
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
    required double textScaleFactor,
    required Size sizeWithOverflow,
  }) {
    super.paint(context, center,
        activationAnimation: activationAnimation,
        enableAnimation: enableAnimation,
        sliderTheme: sliderTheme,
        value: value,
        textScaleFactor: textScaleFactor,
        sizeWithOverflow: sizeWithOverflow,
        isDiscrete: isDiscrete,
        labelPainter: labelPainter,
        parentBox: parentBox,
        textDirection: textDirection);
    _indicatorShape.paint(context, center,
        activationAnimation: const AlwaysStoppedAnimation(1),
        enableAnimation: enableAnimation,
        labelPainter: labelPainter,
        parentBox: parentBox,
        value: value,
        textScaleFactor: 0.6,
        sizeWithOverflow: sizeWithOverflow,
        textDirection: textDirection,
        isDiscrete: isDiscrete,
        sliderTheme: sliderTheme);
  }
}
  • 2
    You can't with using the default implementation. You will have to override it. The value of 4 as radius is not configurable as per source code. https://github.com/flutter/flutter/blob/0f397c08dc99c720bea06ff925106d9858547ee3/packages/flutter/lib/src/material/slider_theme.dart#L2790 – Rahul Apr 30 '22 at 15:09

0 Answers0