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

自定義Slider效果圖：

進(jìn)度條.png

 SliderTheme( //自定義風(fēng)格
            data: SliderTheme.of(context).copyWith(
                activeTrackColor: Colors.pink, //進(jìn)度條滑塊左邊顏色
                inactiveTrackColor: Colors.blue, //進(jìn)度條滑塊右邊顏色
                trackShape: RoundSliderTrackShape(radius: 10),//進(jìn)度條形狀,這邊自定義兩頭顯示圓角
                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),//氣泡里值的風(fēng)格
                trackHeight: 10 //進(jìn)度條寬度

                ),
            child: Slider(
              value: value,
              onChanged: (v) {
                setState(() => value = v);
              },
              label: "氣泡:$value",//氣泡的值
              divisions: 10, //進(jìn)度條上顯示多少個刻度點(diǎn)
              max: 100,
              min: 0,
            ),
          )

自定義進(jìn)度條代碼

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

    //進(jìn)度條兩頭圓角
    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);
  }
}