Flutter Slider组件

Flutter Slider组件

Slider 滑块组件

基本用法

double _sliderValue = 0;

Text("Slider1: $_sliderValue"),
Slider(
  value: _sliderValue,
  onChanged: (value) {
    setState(() {
      _sliderValue = value;
    });
  },
)

其他用法

double _sliderValue2 = 0;

Slider(
  //标签
  label: "值：$_sliderValue2",
  //最小值
  min: 0,
  //最大值
  max: 100,
  //离散值
  divisions: 2,
  //已滑动颜色
  activeColor: Colors.red,
  //未滑动颜色
  inactiveColor: Colors.grey,
  //滑块颜色
  thumbColor: Colors.blue,
  value: _sliderValue2,
  onChanged: (value) {
    setState(() {
      _sliderValue2 = value;
    });
  },
)

RangeSlider 范围滑块组件

RangeValues _rangeValues = RangeValues(0, 0);

RangeSlider(
  values: _rangeValues,
  labels:
  RangeLabels("${_rangeValues.start}", "${_rangeValues.end}"),
  min: 0,
  max: 100,
  divisions: 10,
  onChanged: (value) {
    setState(() {
      _rangeValues = value;
    });
  },
)

iOS风格的Slider

double _iosSliderValue = 0;

CupertinoSlider(
  value: _iosSliderValue,
  onChanged: (value) {
    setState(() {
      _iosSliderValue = value;
    });
  },
)