double size = 300;// 正方形邊長(zhǎng)
List<Offset> centerOffset = <Offset>[];// 九宮格中心點(diǎn)

// 上面3個(gè)
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個(gè)
centerOffset.add(Offset(-size / 3, 0));
centerOffset.add(Offset(-size / 3 + size / 3, 0));
centerOffset.add(Offset(-size / 3 + size / 3 * 2, 0));

// 下面3個(gè)
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);

// 繪制輔助區(qū)域
_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 {
  // 存儲(chǔ)按壓的點(diǎn)集合
  List<PassWord> _points = [];

  List<PassWord> get points => _points;

  // 當(dāng)前手指的位置
  Offset? _currentOffset;

  Offset? get currentOffset => _currentOffset;

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

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

  // 清除所有點(diǎn)
  clearAllPoint() {
    _points.clear();
    notifyListeners();
  }
}

class PassWord {
  int num; // 密碼數(shù)字
  Offset offset; // 密碼數(shù)字對(duì)應(yīng)的點(diǎn)
  PassWord(this.num, this.offset);
}

GestureDetector(
  child: CustomPaint(
    size: Size(size, size),
    painter:
        _GesturesUnlockPainter(_unlockController, centerOffset),
  ),
  onPanDown: (d) {
    // 手指按下
},
  onPanUpdate: (d) {
    // 移動(dòng)                
  },
  onPanEnd: (d) {
   // 抬起結(jié)束
  },
)

///手指按下、移動(dòng)觸發(fā)
void judgeZone(Offset src) {
  /// 循環(huán)所有的九宮格
  for (int i = 0; i < centerOffset.length; i++) {
    var srcTranslate = src.translate(-size / 2, -size / 2);
    // 判斷手指按的位置是否在九宮格圓形區(qū)域
    if (judgeCircleArea(srcTranslate, centerOffset[i].offset, 30)) {
      // 在 判斷是否已添加
      for (int j = 0; j < _unlockController.points.length; j++) {
        if (_unlockController.points[j] == centerOffset[i]) {
          // 已添加過(guò) 返回
          return;
        }
      }
      // 未添加過(guò) 進(jìn)行添加
      _unlockController.addPoint(centerOffset[i]);
      return;
    }
  }
  // 無(wú)點(diǎn)
}
///判斷出是否在某點(diǎn)的半徑為r圓范圍內(nèi)
bool judgeCircleArea(Offset src, Offset dst, double r)=>(src - dst).distance <= r;

var offsets = unlockController.points.map((e) => e.offset).toList();
// 繪制按壓點(diǎn)
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) {
  // 繪制當(dāng)前手勢(shì)線 未經(jīng)過(guò)九宮格圓形時(shí)
    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(); // 獲取這個(gè)數(shù)字的小數(shù)部分
  double? y;
  if (d <= 0.5) {
    y = 2 * d;
  } else {
    y = 1 - 2 * (d - 0.5);
  }
  return y;
}