Question 254207 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter slider always show value indicator, double show

I want to display the value indicator always. Even user release the slider
Unfortunately it seems not to be implemented out of the box in flutter.
So according what I read it has to implemented with custom painter.
The problem is, I have now double of indicator when user tap slider.

My painter:


class _ThumbShape extends RoundSliderThumbShape {
  final _indicatorShape = const PaddleSliderValueIndicatorShape();

  const _ThumbShape();

  @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 ui.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: const AlwaysStoppedAnimation(1),
      labelPainter: labelPainter,
      parentBox: parentBox,
      sliderTheme: sliderTheme,
      value: value,
      textScaleFactor: 1,
      sizeWithOverflow: sizeWithOverflow,
      isDiscrete: isDiscrete,
      textDirection: textDirection,
    );
  }
}

My Slider call:

SliderTheme(
                  data: SliderTheme.of(context).copyWith(
                    thumbShape: _ThumbShape()
                  ),
                  child: Slider(
                    thumbColor: changed
                        ? Get.theme.colors.purple
                        : Get.theme.colors.grey,

                    // activeColor: changed ? Get.theme.colors.purple : Get.theme.colors.grey,
                    value: _currentValue,
                    min: _minValue,
                    max: _maxValue,
                    label: calcString(_currentValue),

                    divisions: _maxValue.toInt() - _minValue.toInt(),
                    onChanged: _updateValue,
                  ))

When slider is untouched it shown as follow (Good):
enter image description here

When user tap slider is shown as follow (Bad):
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok. I find simple parameter solve this.

    showValueIndicator: ShowValueIndicator.never,

  2. 0

    You can always show the thumbShape and make valueIndicatorShape to noOverlay.

    SliderTheme(
    data: SliderTheme.of(context).copyWith(
      thumbShape: _ThumbShape(),
      valueIndicatorShape: SliderComponentShape.noOverlay,
    ),
    child: Slider(
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search