三状态按钮

三重状态按钮。
Flutter 三重状态按钮可以使用切换按钮,但有三种状态。

属性 描述
高度 控件的高度,控件的高度。宽度将是高度的 2 倍。这是必需的。
左图标 左图标将显示在控件的左侧
右图标 右图标将显示在控件的右侧
是否有图标 如果 hasIcon=true,则会显示 leftWidget 和 rightWidget。默认值为 [true]。
圆圈颜色 circleColor 是控件中间圆圈的颜色。这是必需的。
backgroundColor backgroundColor 是主控件(背景)的颜色。这是必需的。
圆圈动画状态 通过 circleAnimState,您可以获取控件的状态。[左、中、右]。

用法

TripleStatusButton(
            height: 20,
            hasIcon: false,
            backgroundColor: const Color(0xffA28DF8).withOpacity(.4),
            circleColor: Colors.white,
            circleAnimState: (state) {
              if (state == CircleAnimState.right) {
                print('right');
              } else if (state == CircleAnimState.middle) {
                print('middle');
              } else if (state == CircleAnimState.left) {
                print('left');
              }
            },
          )

感谢 https://dribbble.com/Volorf 的精美设计。

GitHub

查看 Github