flutter-widget-slider

这里的slider其实就是Android中的seekBar，其最基本的使用如下

class SliderDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SliderDemoState();
  }
}

class _SliderDemoState extends State<SliderDemo> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 20, top: 80),
              child: Slider(
                //最小值
                min: 0.0,
                //最大值
                max: 100.0,
                //每次移动的单位
                divisions: 10,
                //当前值
                value: _value,
                //滑过的进度以及上面显示当前值的颜色
                activeColor: Colors.orange,
                //未滑过的进度条的颜色
                inactiveColor: Colors.black45,
                //显示当前值
                label: 'value：$_value',
                //滑动时触发
                onChanged: (double) {
                  if (mounted)
                    setState(() {
                      _value = double.roundToDouble();

                    });
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

当然现在的这种设置可能无法满足UI需求，为了达到设计效果我们可以自定义slider样式，这时候我们需要用到sliderTheme来自定义样式。

SliderTheme(
  data: SliderTheme.of(context).copyWith(
      //完成进度中的单位分隔符断线中间间隔的颜色
      activeTickMarkColor: Colors.yellowAccent,
      activeTrackColor: Colors.orange,
      //滑块的颜色
      thumbColor: Colors.lightGreenAccent,
      //未完成进度中的单位分隔符断线中间间隔的颜色
      inactiveTickMarkColor: Colors.blue,
      inactiveTrackColor: Colors.deepPurple,
      //提示气泡的背景色
      valueIndicatorColor: Colors.cyanAccent,
      valueIndicatorTextStyle: TextStyle(color: Colors.white),
      //点击滑块时放大那一圈的颜色
      overlayColor: Colors.pink),
  child: Container(
    width: 340.0,
    margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
    child: Row(
      children: <Widget>[
        Text('0.0'),
        Expanded(
          flex: 1,
          child: Slider(
            value: _value,
            label: '$_value',
            divisions: 10,
            onChanged: (double) {
              setState(() {
                _value = double.floorToDouble(); //转化成double
              });
            },
            min: 0.0,
            max: 100.0,
          ),
        ),
        Text('100.0'),
      ],
    ),
  ),
)

如果要自定义的话是以SliderTheme为parent，并且在这里定义需要修改的内容，它的child中包含slider即可（这里的slider就是自定义的样式）

上面代码中对应的颜色如下图