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进行更深层次的定制
