背景

  在最近做的一个Flutter项目中，需要用到手势、指纹解锁，这种需求在原生应用中非常常见，但Flutter中手势密码解锁现有库比较少、官方也仅提供有一个 local_auth指纹库，所以就自己写了个手势库。

功能属性

• 支持自定义各状态下（常态、操作时、操作出错时、不可用时）线颜色、填充色和线宽；
• 支持自定义各种状态下（常态、操作时、操作出错时、不可用时）每个圆圈样式和连接线样式；
• 支持实心、空心两种样式
• 支持图案绘制完成后延迟 500毫秒（默认值）自动清除；
• 支持指示器辅助控件可选择使用；
• 业务逻辑（至少连点几个点、验证时最多可出错几次等）可自定义。

实现效果

image

思路

  其实实现这个自定义的手势控件有很多思路，首先想到的是，要在View中创建9个圆，那么使用GridView再合适不过了，但是经过尝试，放弃了，这会使交互跟逻辑变的更加复杂，所以还是选择直接继承Widget，自己处理逻辑与手势，那么下面就是需要处理的逻辑:

1. 根据控件的大小，绘制9个圆圈；
2. 在手指按到圆圈时，开始绘制路线，并且将按下的圆圈置为选中状态；
3. 在手指滑动时，绘制一根跟随手指移动的、起点为按下的圆圈的线；
4. 当手指滑动到另外一个圆圈时，将第一个按下的圆圈与当前圆圈用线连起来，并且绘制一根以当前圆圈为起点的跟随手指移动的线；
5. 手指按下到圆圈时，以及每次划过圆圈时，将此圆圈对应的数字添加到数组；
6. 当手指抬起时，根据添加的数字判断密码是否正确，若错误，则将所有的线、选中的圆，都置为错误的状态、颜色；
7. 当超过错误次数不可用时，将圆设为不可用状态、颜色，且不可滑动；

代码结构

支持属性

使用示例

Step1：在项目pubspec.yaml添加依赖

dependencies:
    flutter_gesture_unlock: ^1.0.6

Step2 初始化控件

GestureUnlockView(
        size: LcfarmSize.dp(331), //设置大点，让触摸区域变大。让触摸更有效。
        padding: LcfarmSize.dp(40),
        roundSpace: LcfarmSize.dp(40),
        defaultColor: LcfarmColor.colorE3E4E6,
        selectedColor: LcfarmColor.color3776E9,
        failedColor: LcfarmColor.colorFF5656,
        disableColor: LcfarmColor.color30E3E4E6,
        solidRadiusRatio: 0.3,
        lineWidth: LcfarmSize.dp(2),
        touchRadiusRatio: 0.3,
        onCompleted: _gestureComplete,
      );
      
      
 void _gestureComplete(List<int> selected, UnlockStatus status) async {
    switch (_notifier.status) {
      case GestureStatus.create:
      case GestureStatus.createFailed:
        if (selected.length < 4) {
          _notifier.setStatus(
            status: GestureStatus.createFailed,
            gestureTxt: "连接数不能小于4个，请重新设置",
          );
          _gestureUnlockView.updateStatus(UnlockStatus.failed);
        } else {
          _notifier.setStatus(
            status: GestureStatus.verify,
            gestureTxt: "请再次绘制解锁密码",
            resetGestureTxt: "点击此处以重新开始",
          );
          _gesturePassword = GestureUnlockView.selectedToString(selected);
          _gestureUnlockView.updateStatus(UnlockStatus.success);
          _indicator.setSelectPoint(selected);
        }
        break;
      case GestureStatus.verify:
      case GestureStatus.verifyFailed:
        String password = GestureUnlockView.selectedToString(selected);
        if (_gesturePassword == password) {
          showTips("手势密码设置成功");
          //保存密码
    
        } else {
          _notifier.setStatus(
            status: GestureStatus.verifyFailed,
            gestureTxt: "与上一次绘制不一致, 请重新绘制",
          );
          _gestureUnlockView.updateStatus(UnlockStatus.failed);
        }
        break;
      case GestureStatus.verifyFailedCountOverflow:
        break;
    }
  }

指纹

由于官方插件库已经提供有 local_auth 库，在这里就不大赘述，具体使用就参考Flutter官方local_auth插件库。

最后

  如果在使用过程遇到问题，欢迎下方留言交流。

  Pub 库地址

学习资料

• Flutter 中文网
• Flutter Packages
• Flutter 电子书
• Flutter 社区中文资源网

请大家不吝点赞！因为您的点赞是对我最大的鼓励，谢谢！