基于Flutter实现手势密码加密与解锁功能

double size = 300;// 正方形边长
List<Offset> centerOffset = <Offset>[];// 九宫格中心点

// 上面3个
centerOffset.add(Offset(-size / 3, -size / 3));
centerOffset.add(Offset(-size / 3 + size / 3, -size / 3));
centerOffset.add(Offset(-size / 3 + size / 3 * 2, -size / 3));

// 中间3个
centerOffset.add(Offset(-size / 3, 0));
centerOffset.add(Offset(-size / 3 + size / 3, 0));
centerOffset.add(Offset(-size / 3 + size / 3 * 2, 0));

// 下面3个
centerOffset.add(Offset(-size / 3, size / 3));
centerOffset.add(Offset(-size / 3 + size / 3, size / 3));
centerOffset.add(Offset(-size / 3 + size / 3 * 2, size / 3));

Paint paint = Paint()
  ..style = PaintingStyle.stroke
  ..strokeWidth = 2
  ..color = Colors.black87;

canvas.drawRect(
    Rect.fromCenter(center: Offset.zero, width: 300, height: 300), paint);

// 绘制辅助区域
_drawHelpRect(canvas, size, paint);
void _drawHelpRect(Canvas canvas, Size size, Paint paint) {
  for (int i = 0; i < centerOffset.length; i++) {
    canvas.drawRect(
        Rect.fromCenter(center: centerOffset[i], width: 100, height: 100),
        paint);
  }
}

// 绘制圆
_drawCirCle(canvas, size, paint);
void _drawCirCle(Canvas canvas, Size size, Paint paint) {
 for (int i = 0; i < centerOffset.length; i++) {
   canvas.drawCircle(centerOffset[i], 30, paint..color = Colors.black87);
 }
}

class UnlockController extends ChangeNotifier {
  // 存储按压的点集合
  List<PassWord> _points = [];

  List<PassWord> get points => _points;

  // 当前手指的位置
  Offset? _currentOffset;

  Offset? get currentOffset => _currentOffset;

  //
  set currentOffset(Offset? value) {
    _currentOffset = value;
    notifyListeners();
  }

  addPoint(PassWord offset) {
    _points.add(offset);
    notifyListeners();
  }

  // 清除所有点
  clearAllPoint() {
    _points.clear();
    notifyListeners();
  }
}

class PassWord {
  int num; // 密码数字
  Offset offset; // 密码数字对应的点
  PassWord(this.num, this.offset);
}

GestureDetector(
  child: CustomPaint(
    size: Size(size, size),
    painter:
        _GesturesUnlockPainter(_unlockController, centerOffset),
  ),
  onPanDown: (d) {
    // 手指按下
},
  onPanUpdate: (d) {
    // 移动                
  },
  onPanEnd: (d) {
   // 抬起结束
  },
)

///手指按下、移动触发
void judgeZone(Offset src) {
  /// 循环所有的九宫格
  for (int i = 0; i < centerOffset.length; i++) {
    var srcTranslate = src.translate(-size / 2, -size / 2);
    // 判断手指按的位置是否在九宫格圆形区域
    if (judgeCircleArea(srcTranslate, centerOffset[i].offset, 30)) {
      // 在 判断是否已添加
      for (int j = 0; j < _unlockController.points.length; j++) {
        if (_unlockController.points[j] == centerOffset[i]) {
          // 已添加过 返回
          return;
        }
      }
      // 未添加过 进行添加
      _unlockController.addPoint(centerOffset[i]);
      return;
    }
  }
  // 无点
}
///判断出是否在某点的半径为r圆范围内
bool judgeCircleArea(Offset src, Offset dst, double r)=>(src - dst).distance <= r;

var offsets = unlockController.points.map((e) => e.offset).toList();
// 绘制按压点
canvas.drawPoints(
    PointMode.points,
    offsets,
    paint
      ..strokeWidth = 20
      ..strokeCap = StrokeCap.round
      ..color = Colors.red);
// 绘制密码
Path path = Path();
if (unlockController.points.isNotEmpty) {
  path.moveTo(unlockController.points[0].offset.dx,
      unlockController.points[0].offset.dy);
  if (unlockController.currentOffset != null) {
  // 绘制当前手势线 未经过九宫格圆形时
    canvas.drawLine(unlockController.points.last.offset,
        unlockController.currentOffset!, paint..strokeWidth = 2);
  }
}
for (int i = 1; i < unlockController.points.length; i++) {
  path.lineTo(unlockController.points[i].offset.dx,
      unlockController.points[i].offset.dy);
}
canvas.drawPath(path, paint..strokeWidth = 2);

late AnimationController _animationController =
    AnimationController(vsync: this, duration: Duration(milliseconds: 500));

late CurvedAnimation curvedAnimation =
    CurvedAnimation(curve: Curves.easeIn, parent: _animationController);
late Animation<double> animation =
    Tween(begin: 0.0, end: 10.0).animate(curvedAnimation)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _animationController.reset();
        }
      });
AnimatedBuilder(
    animation: animation,
    builder: (ctx, child) {
      return Container(
        margin: EdgeInsetsDirectional.only(
            bottom: 20,
            start: _errorPwd() * 20,
            end: animation.value),
        child: Text(
          text,
          style: TextStyle(fontSize: 20, color: textColor),
        ),
      );
    }),
    
double _errorPwd() {
  double x = animation.value; // 变化速度 0-10,
  double d = x - x.truncate(); // 获取这个数字的小数部分
  double? y;
  if (d <= 0.5) {
    y = 2 * d;
  } else {
    y = 1 - 2 * (d - 0.5);
  }
  return y;
}