如何在Flutter中制作这样的滑块？

Question

               RangeSlider(
                  max: 100,
                  min: 0,
                  values: _currentRangeValues,
                  divisions: 100,
                  labels: RangeLabels(
                    _currentRangeValues.start.round().toString(),
                    _currentRangeValues.end.round().toString(),
                  ),
                  onChanged: (RangeValues values) {
                    setState(() {
                      _currentRangeValues = values;
                    });
                  },
                ),

Answer 1

您需要覆盖RangeSliderThumbShape来创建我们的自定义拇指形状。

class CustomThumbShape implements RangeSliderThumbShape {

  const CustomThumbShape({
    this.radius = 15.0,
    this.ringColor = Colors.red,
  });

  /// Outer radius of thumb

  final double radius;

  /// Color of ring

  final Color ringColor;

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size.fromRadius(radius);
  }

  @override
  void paint(PaintingContext context, Offset center,
      {Animation<double> activationAnimation,
      Animation<double> enableAnimation,
      bool isDiscrete,
      bool isEnabled,
      bool isOnTop,
      TextDirection textDirection,
      SliderThemeData sliderTheme,
      Thumb thumb}) {
    final Canvas canvas = context.canvas;

    // To create a ring create outer circle and create an inner cicrle then 
    // subtract inner circle from outer circle and you will get a ring shape
    // fillType = PathFillType.evenOdd will be used for that

    Path path = Path()
      ..addOval(Rect.fromCircle(center: center, radius: radius))
      ..addOval(Rect.fromCircle(center: center, radius: radius - 5))
      ..fillType = PathFillType.evenOdd;

    canvas.drawPath(path, Paint()..color = ringColor);
  }
}

在MaterialApp中声明此形状

      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        sliderTheme: SliderThemeData(
          rangeThumbShape: CustomThumbShape(),
        ),
      ),

有关更多信息：https://api.flutter.dev/flutter/material/RangeSliderThumbShape-class.html