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(); }); } ), ); } }
Flutter笔记47:SliderTheme滑块主题
Slider滑块组件本身能够满足一些简单的样式需求,但是如果想进行更多的自定义设置,就可以用到SliderTheme滑块主题组件了,SliderTheme必须将Slider包裹起来,才能对Slider进行更深层次的定制