Flutter笔记47：SliderTheme滑块主题

Slider滑块组件本身能够满足一些简单的样式需求，但是如果想进行更多的自定义设置，就可以用到SliderTheme滑块主题组件了，SliderTheme必须将Slider包裹起来，才能对Slider进行更深层次的定制

class _DemoPageState extends State<DemoPage> {
  double value = 0.0;

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        //已拖动的颜色
        activeTrackColor: Colors.yellowAccent,
        //未拖动的颜色
        inactiveTrackColor: Colors.red,
        //提示气泡label的背景色
        valueIndicatorColor: Colors.blue,
        //提示气泡label的文本颜色
        valueIndicatorTextStyle: TextStyle(
          color: Colors.white
        ),
        //滑块中心的颜色
        thumbColor: Colors.orange,
        //滑块边缘的颜色，按下滑块可见
        overlayColor: Colors.green,
        //分段的颜色，即Slider中divisions分段后，每段分割的颜色
        inactiveTickMarkColor: Colors.black,
      ),
      child: Slider(
        value: value,
        label: '$value',
        min: 0.0,
        max: 100.0,
        divisions: 100,
        onChanged: (val) {
          setState(() {
            value = val.floorToDouble();
          });
        }
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！