Flutter拖动条Slider使用

flutter里的Slider也就是Android里面的seekbar

自定义Slider效果图：

进度条.png

 SliderTheme( //自定义风格
            data: SliderTheme.of(context).copyWith(
                activeTrackColor: Colors.pink, //进度条滑块左边颜色
                inactiveTrackColor: Colors.blue, //进度条滑块右边颜色
                trackShape: RoundSliderTrackShape(radius: 10),//进度条形状,这边自定义两头显示圆角
                thumbColor: Colors.yellow, //滑块颜色
                overlayColor: Colors.green, //滑块拖拽时外圈的颜色
                overlayShape: RoundSliderOverlayShape(//可继承SliderComponentShape自定义形状
                  overlayRadius: 25, //滑块外圈大小
                ),
                thumbShape: RoundSliderThumbShape(//可继承SliderComponentShape自定义形状
                  disabledThumbRadius: 15, //禁用是滑块大小
                  enabledThumbRadius: 15, //滑块大小
                ),
                inactiveTickMarkColor: Colors.black,
                tickMarkShape: RoundSliderTickMarkShape(//继承SliderTickMarkShape可自定义刻度形状
                  tickMarkRadius: 4.0,//刻度大小
                ),
                showValueIndicator: ShowValueIndicator.onlyForDiscrete,//气泡显示的形式
                valueIndicatorColor: Colors.red,//气泡颜色
                valueIndicatorShape: PaddleSliderValueIndicatorShape(),//气泡形状
                valueIndicatorTextStyle: TextStyle(color: Colors.black),//气泡里值的风格
                trackHeight: 10 //进度条宽度

                ),
            child: Slider(
              value: value,
              onChanged: (v) {
                setState(() => value = v);
              },
              label: "气泡:$value",//气泡的值
              divisions: 10, //进度条上显示多少个刻度点
              max: 100,
              min: 0,
            ),
          )

自定义进度条代码

import 'package:flutter/material.dart';

class RoundSliderTrackShape extends SliderTrackShape {

  const RoundSliderTrackShape({this.disabledThumbGapWidth = 2.0, this.radius = 0});

  final double disabledThumbGapWidth;
  final double radius;

  @override
  Rect getPreferredRect({
    RenderBox parentBox,
    Offset offset = Offset.zero,
    SliderThemeData sliderTheme,
    bool isEnabled,
    bool isDiscrete,
  }) {
    final double overlayWidth = sliderTheme.overlayShape.getPreferredSize(isEnabled, isDiscrete).width;
    final double trackHeight = sliderTheme.trackHeight;
    assert(overlayWidth >= 0);
    assert(trackHeight >= 0);
    assert(parentBox.size.width >= overlayWidth);
    assert(parentBox.size.height >= trackHeight);

    final double trackLeft = offset.dx + overlayWidth / 2;
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
   
    final double trackWidth = parentBox.size.width - overlayWidth;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }

  @override
  void paint(
    PaintingContext context,
    Offset offset, {
    RenderBox parentBox,
    SliderThemeData sliderTheme,
    Animation enableAnimation,
    TextDirection textDirection,
    Offset thumbCenter,
    bool isDiscrete,
    bool isEnabled,
  }) {
    if (sliderTheme.trackHeight == 0) {
      return;
    }

    final ColorTween activeTrackColorTween =
        ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
    final ColorTween inactiveTrackColorTween =
        ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);
    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation);
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation);
    Paint leftTrackPaint;
    Paint rightTrackPaint;
    switch (textDirection) {
      case TextDirection.ltr:
        leftTrackPaint = activePaint;
        rightTrackPaint = inactivePaint;
        break;
      case TextDirection.rtl:
        leftTrackPaint = inactivePaint;
        rightTrackPaint = activePaint;
        break;
    }

    double horizontalAdjustment = 0.0;
    if (!isEnabled) {
      final double disabledThumbRadius =
          sliderTheme.thumbShape.getPreferredSize(false, isDiscrete).width / 2.0;
      final double gap = disabledThumbGapWidth * (1.0 - enableAnimation.value);
      horizontalAdjustment = disabledThumbRadius + gap;
    }

    final Rect trackRect = getPreferredRect(
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
    );

    //进度条两头圆角
    final RRect leftTrackSegment = RRect.fromLTRBR(trackRect.left, trackRect.top,
        thumbCenter.dx - horizontalAdjustment, trackRect.bottom, Radius.circular(radius));
    context.canvas.drawRRect(leftTrackSegment, leftTrackPaint);
    final RRect rightTrackSegment = RRect.fromLTRBR(thumbCenter.dx + horizontalAdjustment, trackRect.top,
        trackRect.right, trackRect.bottom, Radius.circular(radius));
    context.canvas.drawRRect(rightTrackSegment, rightTrackPaint);
  }
}