diamond_node_slider
- 该节点是菱形滑块。也可以是圆形的.
- 可以实现有过渡值和无过渡值两种效果.
- 气泡显示其值,节点底部文本可选择显示或不展示.
- 可无节点
- 可配置初始值
使用
DiamondNodeSlisder(
activeTrackColor: Color(0xFF878E9A),
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 2.5,
divisions: 4,
maxValue: 100,
minValue: 0,
textUnitStr: '%',
valueChanged:(value,ratioV) {
print('value===$value');
},
),
DiamondNodeSlisder(
activeTrackColor: Colors.red,
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 2.5,
divisions: 5,
maxValue: 125,
minValue: 1,
textUnitStr: 'x',
valueChanged:(value,ratioV) {
print('value===$value');
},
),
DiamondNodeSlisder(
activeTrackColor: Colors.blue,
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 2.5,
divisions: 4,
maxValue: 80,
minValue: 0,
textShowBool: false,
valueChanged:(value,ratioV) {
print('value===$value');
},
),
DiamondNodeSlisder(
activeTrackColor: Colors.orange,
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 5,
nodeWidth: 15,
divisions: 4,
maxValue: 120,
minValue: 0,
isRhombus: false,
valueChanged:(value,ratioV) {
print('value===$value');
},
),
DiamondNodeSlisder(
activeTrackColor: Colors.green,
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 2.5,
divisions: 4,
maxValue: 150,
minValue: 0,
textUnitStr: 'm',
toNodeBool: true,
valueChanged:(value,ratioV) {
print('value===$value');
},
),
DiamondNodeSlisder(
activeTrackColor: Colors.purple,
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 5,
divisions: 0,
nodeWidth: 15,
isRhombus: false,
maxValue: 100,
minValue: 0,
textUnitStr: '%',
textShowBool: false,
valueChanged: (value, ratioV) {
print('value===$value');
},
),
DiamondNodeSlisder(
ratioValue: _ratioValue,
activeTrackColor: Color(0xFF878E9A),
unActiveTrackColor: Color(0xFFEBEBEB),
width: 300.0,
height: 2.5,
divisions: 4,
maxValue: sliderMaxValue,
minValue: sliderMinValue,
textUnitStr: 'x',
valueChanged:(value,ratioV) {
setState(() {
_currentValue= value;
print('_currentValue===$_currentValue');
_ratioValue = ratioV;
print('ratioV===$_ratioValue');
leverController.text='${value}x';
});
},
),
效果
参数说明
final double width;
final double height;
final int? maxValue;
final int? minValue;
final int divisions;
final Color? unActiveTrackColor;
final Color? activeTrackColor;
final String textUnitStr;
final bool textShowBool;
final double nodeWidth;
final bool isRhombus;
final bool toNodeBool;
final double? ratioValue;
final Function(int) valueChanged;