Flutter Slider始终显示值指示器点击时出现双指示器问题求助

问题场景 #

需要让Flutter的Slider组件始终显示数值指示器（即使释放滑块），通过继承RoundSliderThumbShape自定义了滑块形状，在paint方法中手动绘制指示器。但未点击滑块时显示正常，点击拖动滑块时出现两个重叠的数值指示器。

问题原因 #

当滑块处于激活状态（点击或拖动时），原生Slider组件会自动绘制默认的数值指示器；而自定义的_ThumbShape中又手动调用了_indicatorShape.paint绘制了一个指示器，两者叠加导致双指示器问题。

解决方案 #

禁用原生的数值指示器绘制，只保留自定义的指示器即可。具体步骤如下：

1. 定义空的数值指示器形状 #

创建一个不执行任何绘制操作的SliderValueIndicatorShape子类，用于替代原生的指示器：

class _NoValueIndicatorShape extends SliderValueIndicatorShape {
  const _NoValueIndicatorShape();

  @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,
  }) {
    // 空实现，不绘制任何内容
  }
}

2. 修改SliderTheme配置 #

在SliderTheme的data中，添加valueIndicatorShape配置为上述空形状，同时保持自定义的thumbShape：

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    thumbShape: const _ThumbShape(),
    // 禁用原生数值指示器
    valueIndicatorShape: const _NoValueIndicatorShape(),
    // 可选：明确设置指示器显示规则为始终显示
    showValueIndicator: ShowValueIndicator.always,
  ),
  child: Slider(
    thumbColor: 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,
  ),
)

3. 保留自定义ThumbShape逻辑 #

原有的_ThumbShape代码无需修改，它会负责始终绘制数值指示器：

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 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,
    );
  }
}

效果验证 #

修改后，无论滑块是否被点击或拖动，都只会显示一个数值指示器，实现了“始终显示”的需求。

内容的提问来源于stack exchange，提问作者Elihai David Vanunu