SliderTheme(
  data: SliderThemeData(
      tickMarkShape: LineSliderTickMarkShape(strokeWidth: 2)),
  child: Slider(
        divisions: 10,
        value: value,
        onChanged: (double value) {},
      ),
)
///进度条内容自定义
class LineSliderTickMarkShape extends SliderTickMarkShape {
  const LineSliderTickMarkShape(
      {this.tickMarkRadius = 0.0, this.strokeWidth = 1.0});
  ///圆角
  final double tickMarkRadius;
  ///竖条宽度
  final double strokeWidth;

  @override
  Size getPreferredSize({
    required SliderThemeData sliderTheme,
    required bool isEnabled,
  }) {
    assert(sliderTheme != null);
    assert(sliderTheme.trackHeight != null);
    assert(isEnabled != null);
    return Size.fromRadius(tickMarkRadius);
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
    required bool isEnabled,
  }) {
    Color? beginColor;
    Color? endColor;
    ///左右滑动颜色变更
    switch (textDirection) {
      case TextDirection.ltr:
        final bool isTickMarkRightOfThumb = center.dx > thumbCenter.dx;
        beginColor = isTickMarkRightOfThumb
            ? sliderTheme.disabledInactiveTickMarkColor
            : sliderTheme.disabledActiveTickMarkColor;
        endColor = isTickMarkRightOfThumb
            ? sliderTheme.inactiveTickMarkColor
            : sliderTheme.activeTickMarkColor;
        break;
      case TextDirection.rtl:
        final bool isTickMarkLeftOfThumb = center.dx < thumbCenter.dx;
        beginColor = isTickMarkLeftOfThumb
            ? sliderTheme.disabledInactiveTickMarkColor
            : sliderTheme.disabledActiveTickMarkColor;
        endColor = isTickMarkLeftOfThumb
            ? sliderTheme.inactiveTickMarkColor
            : sliderTheme.activeTickMarkColor;
        break;
    }
    ///进度条样式、动画设置
    final Paint paint = Paint()
      ..color = ColorTween(begin: beginColor, end: endColor)
          .evaluate(enableAnimation)!
      ..style = PaintingStyle.fill
      ..strokeWidth = strokeWidth;
    ///进度条画布
    context.canvas.drawLine(Offset(center.dx, center.dy - 5),
        Offset(center.dx, center.dy + 5), paint);
  }
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐