Flutter 自定义Slider

1. 前言

<1> 自定义样式 （节点和滑竿）
<2> 过渡值和分段值效果都可实现

2. 效果展示

diamond_node_slider.gif	diamond_node_slider.jpeg

3. 使用

该插件为本人撰写，点击pub.dev查看。

dependencies:
 diamond_node_slider: ^1.0.0

4. 代码

///常用
          DiamondNodeSlisder((value) {
            print('value===${value}');
          },
            activeTrackColor: Color(0xFF878E9A),
            unActiveTrackColor: Color(0xFFEBEBEB),
            width: 300,
            height: 2.5,
            divisions: 4,
            maxValue: 100,
            minValue: 0,
            textUnitStr: '%',
          ),




          ///最小值不为0
          DiamondNodeSlisder((value) {
            print('value===${value}');
            },
            activeTrackColor: Colors.red,
            unActiveTrackColor: Color(0xFFEBEBEB),
            width: 300,
            height: 2.5,
            divisions: 5,
            maxValue: 125,
            minValue: 1, //最小值 
            textUnitStr: 'x',
          ),



          ///节点文字不显示
          DiamondNodeSlisder((value) {
              print('value===${value}');
          },
            activeTrackColor: Colors.blue,
            unActiveTrackColor: Color(0xFFEBEBEB),
            width: 300,
            height: 2.5,
            divisions: 4,
            maxValue: 80,
            minValue: 0,
            textShowBool: false, //不显示
          ),

   

          ///节点圆形、设置轨道高度
          DiamondNodeSlisder((value) {
            print('value===${value}');
          },
            activeTrackColor: Colors.orange,
            unActiveTrackColor: Color(0xFFEBEBEB),
            width: 300,
            height: 5,//轨道高度
            nodeWidth: 15, //节点宽高
            divisions: 4,
            maxValue: 120,
            minValue: 0,
            isRhombus: false,//非菱形
          ),

  

          ///直接跳到节点，无过渡
          DiamondNodeSlisder((value) {
            print('value===${value}');
          },
            activeTrackColor:  Colors.green,
            unActiveTrackColor: Color(0xFFEBEBEB),
            width: 300,
            height: 2.5,
            divisions: 5,
            maxValue: 150,
            minValue: 0,
            textUnitStr: 'm',
            toNodeBool: true,//滑动跳到节点
          ),          

5. 参数说明

 final double width;//长度
 final double height;//高度

 final int? maxValue;//最大值
 final int? minValue;//最小值

 final int divisions;//段数

 final Color?  unActiveTrackColor;//不活跃颜色
 final Color?  activeTrackColor;//活跃颜色

 final String textUnitStr;//文字单位：%、x等
 final bool textShowBool;//是否显示节点下的文字

 final double nodeWidth;//节点宽高
 final bool isRhombus;//true:菱形（默认） false：圆形
 final bool toNodeBool;//滑动直接跳到节点，无过渡

 final Function(int) valueChanged;//回调slider值

6. Git地址

diamond_node_slider