你可以使用RangeSlider小部件。下面是范围滑块的示例代码。如果你需要使中心点恒定，你可以使用onChanged回调方法使中心值恒定。

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  RangeValues _currentRangeValues = const RangeValues(0, 0);

  @override
  Widget build(BuildContext context) {
    return RangeSlider(
      values: _currentRangeValues,
      max: 100,
      min: -100,
      divisions: 150,
      labels: RangeLabels(
        _currentRangeValues.start.round().toString(),
        _currentRangeValues.end.round().toString(),
      ),
      onChanged: (RangeValues values) {
        setState(() {
          _currentRangeValues = values;
        });
      },
    );
  }

  
}

您可以使用此选项

import 'package:flutter/material.dart';
   import 'package:madeup_flutter/base_class/base_widget.dart';
   import 'package:sizer/sizer.dart';
   
   import '../../constants/colors.dart';
   
   class CustomSlider extends StatefulWidget {
     double value;
     final Function? onChange;
   
     double? maxValue;
   
     CustomSlider({Key? key, required this.value, this.onChange, 
      this.maxValue})
         : super(key: key);
   
     @override
     State<CustomSlider> createState() => _CustomSliderState();
   }
   
   class _CustomSliderState extends BaseFullState<CustomSlider> {
       @override
       Widget build(BuildContext context) {
return SliderTheme(
  data: SliderTheme.of(context).copyWith(
      trackShape: RectangularSliderTrackShape(),
      trackHeight: 15.0,
      valueIndicatorColor:
          widget.value < 0 ? AppColors.red : AppColors.green200,
      showValueIndicator: ShowValueIndicator.always,
      thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10),
      overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
      valueIndicatorTextStyle: TextStyle(
          color: Colors.white, letterSpacing: 2.0, fontFamily: "Roboto")),
  child: Stack(
    children: [
      Positioned.fill(
          child: Container(
        margin: EdgeInsets.symmetric(vertical: 3.h, horizontal: 3.w),
        decoration: BoxDecoration(
            color: AppColors.grey500,
            borderRadius: BorderRadius.circular(3.w)),
        child: Row(
          children: List.generate(20, (index) {
            var color = _getColor(index);
            var isCircle =
                (color == AppColors.red && index == (widget.value) + 10) ||
                    (color == AppColors.baseAppColor &&
                        index == (widget.value) + 9);
            return Expanded(
              child: Container(
                  decoration: BoxDecoration(
                borderRadius: BorderRadius.horizontal(
                    left: Radius.circular(isCircle
                        ? (color == AppColors.red ? 5 : 0)
                        : (index == 10 && color == AppColors.baseAppColor
                            ? 5
                            : 0)),
                    right: Radius.circular(isCircle
                        ? (color == AppColors.baseAppColor ? 5 : 0)
                        : (index == 10 && color == AppColors.red ? 5 : 
             0))),
                color: color,
              )),
            );
          }),
        ),
      )),
      Slider(
        value: widget.value,
        max: widget.maxValue ?? 10,
        min: -10,
        divisions: 20,
        activeColor: Colors.transparent,
        inactiveColor: Colors.transparent,
        thumbColor: AppColors.grey800,
        label: widget.value.round().toString() ?? "",
        onChangeEnd: (newValue) {
          widget.onChange?.call(newValue);
        },
        onChanged: (newValue) {
          widget.value = newValue;
          setState(() {});
        },
      ),
    ],
  ),
);
}

_getColor(int index) {
if (widget.value > 0) {
  if (index < 10) {
    return AppColors.grey500;
  } else if (index < (widget.value + 10)) {
    return AppColors.baseAppColor;
  } else {
    return AppColors.grey500;
  }
} else {
  if (index > 10) {
    return AppColors.grey500;
  } else if (index < (widget.value + 10)) {
    return AppColors.grey500;
  } else {
    return AppColors.red;
  }
 }
}
}