在使用Flutter自带的Slider组件时,使用divisions字段后,滑杆会显示刻度小点,需求是隐藏刻度
实现方式:自定义tickMarkShape,强制修改activeTickMarkColor和inactiveTickMarkColor
import 'package:flutter/material.dart';
/// Created by bawomingtian on 9.12.21.
/// 隐藏Slider滑杆刻度
class AllocateRoundSliderTickMarkShape extends RoundSliderTickMarkShape {
@override
void paint(PaintingContext context, Offset center,
{RenderBox parentBox,
SliderThemeData sliderTheme,
Animation enableAnimation,
TextDirection textDirection,
Offset thumbCenter,
bool isEnabled}) {
sliderTheme = sliderTheme.copyWith(
trackHeight: sliderTheme.trackHeight,
activeTrackColor: sliderTheme.activeTrackColor,
inactiveTrackColor: sliderTheme.inactiveTrackColor,
disabledActiveTrackColor: sliderTheme.disabledActiveTrackColor,
disabledInactiveTrackColor: sliderTheme.disabledInactiveTrackColor,
activeTickMarkColor: Colors.transparent,
inactiveTickMarkColor: Colors.transparent,
disabledActiveTickMarkColor: sliderTheme.disabledActiveTickMarkColor,
disabledInactiveTickMarkColor: sliderTheme.disabledInactiveTickMarkColor,
thumbColor: sliderTheme.thumbColor,
disabledThumbColor: sliderTheme.disabledThumbColor,
overlayColor: sliderTheme.overlayColor,
valueIndicatorColor: sliderTheme.valueIndicatorColor,
trackShape: sliderTheme.trackShape,
tickMarkShape: sliderTheme.tickMarkShape,
thumbShape: sliderTheme.thumbShape,
overlayShape: sliderTheme.overlayShape,
valueIndicatorShape: sliderTheme.valueIndicatorShape,
showValueIndicator: sliderTheme.showValueIndicator,
valueIndicatorTextStyle: sliderTheme.valueIndicatorTextStyle);
super.paint(context, center,
parentBox: parentBox,
sliderTheme: sliderTheme,
enableAnimation: enableAnimation,
textDirection: textDirection,
thumbCenter: thumbCenter,
isEnabled: isEnabled);
}
}
在SliderTheme中使用
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
alignment: Alignment.topCenter,
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
trackShape: BalanceShape(),
trackHeight: widget.trackHeight,
activeTickMarkColor: Colors.white,
inactiveTickMarkColor: Colors.white,
tickMarkShape: AllocateRoundSliderTickMarkShape(),
thumbShape: RoundSliderThumbShape(enabledThumbRadius: widget.thumbRadius),
valueIndicatorShape: PaddleSliderValueIndicatorShape(),
valueIndicatorTextStyle: TextStyle(fontSize: 14.0)),
child: Slider(
value: value,
onChanged: (data) {
setState(() {
value = data;
});
},
onChangeStart: (data) {
print('start:$data');
},
onChangeEnd: (data) {
print('end:$data');
},
min: widget.min,
max: widget.max,
label: "$value",
divisions: 10,
activeColor: activeColor,
inactiveColor: inactiveColor,
semanticFormatterCallback: (double newValue) {
return '${newValue.round()} dollars}';
},
),
),
);
}