// point.dart
import 'package:flutter/material.dart';
import 'dart:math';

// 手勢密碼盤上的圓點(diǎn)
class GesturePoint {
  // 中心實(shí)心圓點(diǎn)的畫筆
  static final pointPainter = Paint()
    ..style = PaintingStyle.fill
    ..color = Colors.blue;

  // 外層圓環(huán)的畫筆
  static final linePainter = Paint()
    ..style = PaintingStyle.stroke
    ..strokeWidth = 1.2
    ..color = Colors.blue;

  // 圓點(diǎn)索引，0-9
  final int index;
  // 圓心坐標(biāo)
  final double centerX;
  final double centerY;
  // 中心實(shí)心圓點(diǎn)的半徑
  final double radius = 4;
  // 外層空心的圓環(huán)半徑
  final double padding = 26;

  GesturePoint(this.index, this.centerX, this.centerY);

  // 繪制小圓點(diǎn)
  void drawCircle(Canvas canvas) {
    // 繪制中心實(shí)心的圓點(diǎn)
    canvas.drawOval(
        Rect.fromCircle(center: Offset(centerX, centerY), radius: radius),
        pointPainter);

    // 繪制外層的圓環(huán)
    canvas.drawOval(
        Rect.fromCircle(center: Offset(centerX, centerY), radius: padding),
        linePainter);
  }

  // 判斷坐標(biāo)是否在小圓內(nèi)（padding為半徑）
  // 該方法用于在手指滑動時做判斷，一旦坐標(biāo)處于圓點(diǎn)內(nèi)部，則認(rèn)為選中該圓點(diǎn)
  bool checkInside(double x, double y) {
    var distance = sqrt(pow((x - centerX), 2) + pow((y - centerY), 2));
    return distance <= padding;
  }

  // 提供比較方法，用于判斷List中是否存在某個點(diǎn)
  // 這個方法會在后面用到，當(dāng)手勢滑動到某個點(diǎn)時，如果之前滑動到過這個點(diǎn)，則這個點(diǎn)不能再被選中
  @override
  bool operator ==(Object other) {
    if (other is GesturePoint) {
      return this.index == other.index &&
          this.centerX == other.centerX &&
          this.centerY == other.centerY;
    }
    return false;
  }

  // 復(fù)寫==方法時必須同時復(fù)寫hashCode方法
  @override
  int get hashCode => super.hashCode;

}

// panel.dart
import 'package:flutter/material.dart';
import 'package:flutter_gesture_password/point.dart';

// 9個圓點(diǎn)視圖
class GestureDotsPanel extends StatelessWidget {
  // 表示圓點(diǎn)盤的寬高
  final double width, height;
  // 裝載9個圓點(diǎn)的集合，從外部傳入
  final List<GesturePoint> points;
    
  // 構(gòu)造方法
  GestureDotsPanel(this.width, this.height, this.points);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      child: CustomPaint(
        painter: _PanelPainter(points),
      ),
    );
  }
}

// 自定義的Painter，用于從圓點(diǎn)集合中遍歷所有圓點(diǎn)并依次畫出
class _PanelPainter extends CustomPainter {
  final List<GesturePoint> points;

  _PanelPainter(this.points);

  @override
  void paint(Canvas canvas, Size size) {
    if (points.isNotEmpty) {
      for (var p in points) {
        // 畫出所有的圓點(diǎn)
        p.drawCircle(canvas);
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false; // 不讓更新

}

// path.dart
import 'package:flutter/material.dart';
import 'package:flutter_gesture_password/gesture_view.dart';
import 'package:flutter_gesture_password/point.dart';

// 手勢密碼路徑視圖
class GesturePathView extends StatefulWidget {
  // 手勢密碼路徑視圖的寬高，需要跟圓點(diǎn)視圖保持一致，由構(gòu)造方法傳入
  final double width;
  final double height;
  // 手勢密碼中的9個點(diǎn)，由構(gòu)造方法傳入
  final List<GesturePoint> points;
  // 手勢密碼監(jiān)聽器，用于在手指抬起時觸發(fā)，其定義為：typedef OnGestureCompleteListener = void Function(List<int>);
  final OnGestureCompleteListener listener;

  // 構(gòu)造方法
  GesturePathView(this.width, this.height, this.points, this.listener);

  @override
  State<StatefulWidget> createState() => _GesturePathViewState();
}

class _GesturePathViewState extends State<GesturePathView> {
  // 記錄手指按下或者滑動過程中，經(jīng)過的最后一個點(diǎn)
  GesturePoint? lastPoint;
  // 記錄手指滑動時的坐標(biāo)
  Offset? movePos;
  // 記錄手指滑動過程中所有經(jīng)過的點(diǎn)
  List<GesturePoint> pathPoints = [];

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: CustomPaint(
        size: Size(widget.width, widget.height),    // 指定組件大小
        painter: _PathPainter(movePos, pathPoints), // 指定組件的繪制者，當(dāng)movePos或者pathPoints更新時，整個組件也需要更新
      ),
      onPanDown: _onPanDown,     // 手指按下
      onPanUpdate: _onPanUpdate, // 手指滑動
      onPanEnd: _onPanEnd,       // 手指抬起
    );
  }

  // 手指按下
  _onPanDown(DragDownDetails e) {
    // 判斷按下的坐標(biāo)是否在某個點(diǎn)上
    // 注意：e.localPosition表示的坐標(biāo)為相對整個組件的坐標(biāo)
    // e.globalPosition表示的坐標(biāo)為相對整個屏幕的坐標(biāo)
    final x = e.localPosition.dx;
    final y = e.localPosition.dy;
    // 判斷是否按在某個點(diǎn)上
    for (var p in widget.points) {
      if (p.checkInside(x, y)) {
        lastPoint = p;
      }
    }
    // 重置pathPoints
    pathPoints.clear();
  }

  // 手指滑動
  _onPanUpdate(DragUpdateDetails e) {
    // 如果手指按下時不在某個圓點(diǎn)上，則不處理滑動事件
    if (lastPoint == null) {
      return;
    }
    // 滑動時如果在某個圓點(diǎn)上，則將該圓點(diǎn)加入路徑中
    final x = e.localPosition.dx;
    final y = e.localPosition.dy;
    // passPoint代表手指滑動時是否經(jīng)過某個點(diǎn)，可為空
    GesturePoint? passPoint;
    for (var p in widget.points) {
      // 如果手指滑動經(jīng)過某個點(diǎn)，且這個點(diǎn)之前沒有經(jīng)過，則記錄下這個點(diǎn)
      if (p.checkInside(x, y) && !pathPoints.contains(p)) {
        passPoint = p;
        break;
      }
    }
    setState(() {
      // 如果經(jīng)過點(diǎn)部為空，則需要刷新lastPoint和pathPoints，觸發(fā)整個組件的更新
      if (passPoint != null) {
        lastPoint = passPoint;
        pathPoints.add(passPoint);
      }
      // 更新movePos的值
      movePos = Offset(x, y);
    });
  }

  // 手指抬起
  _onPanEnd(DragEndDetails e) {
    setState(() {
      // 將movePos設(shè)置為空，防止畫出最后一個點(diǎn)到手指抬起時的坐標(biāo)間的直線
      movePos = null;
    });
    // 調(diào)用Listener，返回手勢經(jīng)過的所有點(diǎn)
    List<int> arr = [];
    if (pathPoints.isNotEmpty) {
      for (var value in pathPoints) {
        arr.add(value.index);
      }
    }   
    widget.listener(arr);
  }
}

// 繪制手勢路徑
class _PathPainter extends CustomPainter {
  // 手指當(dāng)前的坐標(biāo)
  final Offset? movePos;
  // 手指經(jīng)過點(diǎn)集合
  final List<GesturePoint> pathPoints;

  // 路徑畫筆
  final pathPainter = Paint()
    ..style = PaintingStyle.stroke
    ..strokeWidth = 6
    ..strokeCap = StrokeCap.round
    ..color = Colors.blue;

  _PathPainter(this.movePos, this.pathPoints);

  @override
  void paint(Canvas canvas, Size size) {
    _drawPassPath(canvas);
    _drawRTPath(canvas);
  }

  // 繪制手指一動過程中，經(jīng)過的所有點(diǎn)之間的直線
  _drawPassPath(Canvas canvas) {
    if (pathPoints.length <= 1) {
      return;
    }
    for (int i = 0; i < pathPoints.length - 1; i++) {
      var start = pathPoints[i];
      var end = pathPoints[i + 1];
      canvas.drawLine(Offset(start.centerX, start.centerY),
          Offset(end.centerX, end.centerY), pathPainter);
    }
  }

  // 繪制實(shí)時的，最后一個經(jīng)過點(diǎn)和當(dāng)前手指坐標(biāo)間的直線
  _drawRTPath(Canvas canvas) {
    if (pathPoints.isNotEmpty && movePos != null) {
      var lastPoint = pathPoints.last;
      canvas.drawLine(Offset(lastPoint.centerX, lastPoint.centerY), movePos!, pathPainter);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

import 'package:flutter/material.dart';
import 'package:flutter_gesture_password/path.dart';
import 'package:flutter_gesture_password/point.dart';
import 'package:flutter_gesture_password/panel.dart';

// 定義手勢密碼回調(diào)監(jiān)聽器
typedef OnGestureCompleteListener = void Function(List<int>);

class GestureView extends StatefulWidget {
  final double width, height;
  final OnGestureCompleteListener listener;

  GestureView({required this.width, required this.height, required this.listener});

  @override
  State<StatefulWidget> createState() => _GestureViewState();
}

class _GestureViewState extends State<GestureView> {
  List<GesturePoint> _points = [];

  @override
  void initState() {
    super.initState();
    // 計(jì)算9個圓點(diǎn)的位置坐標(biāo)
    double deltaW = widget.width / 4;
    double deltaH = widget.height / 4;
    for (int row = 0; row < 3; row++) {
      for (int col = 0; col < 3; col++) {
        int index = row * 3 + col;
        var p = GesturePoint(index, (col + 1) * deltaW, (row + 1) * deltaH);
        _points.add(p);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        GestureDotsPanel(widget.width, widget.height, _points),
        GesturePathView(widget.width, widget.height, _points, widget.listener)
      ],
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_gesture_password/gesture_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gesture password',
      home: _Home(),
    );
  }
}

class _Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomeState();
}

class _HomeState extends State<_Home> {
  List<int>? pathArr;

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text('Gesture password'),
      ),
      body: Column(
        children: [
          GestureView(
            width: screenWidth,
            height: screenWidth,
            listener: (arr) {
              setState(() {
                pathArr = arr;
              });
            },
          ),
          Text("${pathArr == null ? '' : pathArr}")
        ],
      ),
    );
  }
}

homepage: 「填寫項(xiàng)目主頁地址，這里可以直接用github倉庫地址」
publish_to: 'https://pub.dev' # 這個配置表示要把插件發(fā)布到哪里
version: 0.0.2 # 插件版本，每次更新記得修改這個version