本文同步釋出在掘金社群：https://juejin.cn/post/6996860982488219661

前言

本篇記錄的是使用Flutter完成手勢密碼的功能，大緻效果如下圖所示：

Flutter手勢密碼插件從開發到釋出至pub倉庫前言開始上傳自定義元件到pub倉庫後記

該手勢密碼的功能比較簡單，下面會詳細記錄實作的過程，另外還會簡單說明如何将該手勢密碼作為插件釋出到pub倉庫。

開始

實作上面的手勢密碼并不難，大緻可以拆分成如下幾部分來完成：

繪制9個圓點
繪制手指滑動的線路
合并以上兩個部分

繪制圓點

我們使用面向對象的方式來處理9個圓點的繪制，每個圓點作為一個

GesturePoint

類，這個類要提供一個圓心坐标和半徑才能畫出圓形來，這裡先放上這個類的源碼：

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

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

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

  // 圓點索引，0-9
  final int index;
  // 圓心坐标
  final double centerX;
  final double centerY;
  // 中心實心圓點的半徑
  final double radius = 4;
  // 外層空心的圓環半徑
  final double padding = 26;

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

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

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

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

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

  // 複寫==方法時必須同時複寫hashCode方法
  @override
  int get hashCode => super.hashCode;

}

上面需要注意的是，

GesturePoint

類提供了一個

drawCircle

方法用于繪制自身，将會在後面的代碼中用到。

有了圓點這個對象，我們還需要将9個圓點依次畫在螢幕上，由于這9個圓點後續是不再更新的，是以使用一個

StatelessWidget

即可。（如果你需要做成手指滑動到某個圓點，該圓點變色的效果，則需要用StatefulWidget元件去更新狀态。）

下面使用一個自定義的無狀态元件去畫這9個圓點，代碼如下：

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

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

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

// 自定義的Painter，用于從圓點集合中周遊所有圓點并依次畫出
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) {
        // 畫出所有的圓點
        p.drawCircle(canvas);
      }
    }
  }

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

}

以上代碼比較簡單，就不做詳細說明了，如果對Flutter繪圖基礎還不了解的同學，可以看看這裡的介紹：《Flutter實戰——自繪元件（CustomPaint與Canvas）》

繪制手勢路徑

之是以手勢路徑要單獨拿出來繪制，沒有跟上面的9個小圓點盤放一起，是因為我們的圓點盤是不更新的，而手勢路徑需要在手指的每一次滑動中更新，是以單獨将手勢路徑作為一個元件。顯然這個元件是一個有狀态的元件，需要繼承

StatefulWidget

來實作。

在開始編碼前，我們需要分析手勢滑動的流程：

必須監聽手指按下，手指滑動，手指擡起三種不同的事件
手指按下時，如果不在9個圓點中的任意一個上面，則手指滑動是無效的
手指按下時若在某個點上，則後面手指移動時，需要繪制從那個點到手指目前的一條直線，若手指移動過程中進入其他圓點，則需要先繪制之前手指經過的所有圓點間的直線，再繪制最後一個圓點到手指目前滑動的坐标間的直線
每個圓點隻允許被記錄一次，若之前手指滑動經過某個點，後面手指再經過該點時，該點不應該被記錄
手指擡起後，需要計算手指移動過程中經過了哪些點，以數組的形式傳回所有點的索引。且手指擡起後，不需要繪制最後一個點到手指擡起時的坐标間的直線

梳理了上面的手勢密碼繪制流程後，我們還需要了解Flutter處理手勢的一些API，本例子中主要使用的

GestureDetector

，這是Flutter官方對移動端手勢封裝的一個Widget，使用起來非常友善，如果有不太了解的同學，可以參考這裡——《Flutter實戰——手勢識别》

下面放上繪制手勢密碼路徑的所有代碼：

// 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 {
  // 手勢密碼路徑視圖的寬高，需要跟圓點視圖保持一緻，由構造方法傳入
  final double width;
  final double height;
  // 手勢密碼中的9個點，由構造方法傳入
  final List<GesturePoint> points;
  // 手勢密碼監聽器，用于在手指擡起時觸發，其定義為：typedef OnGestureCompleteListener = void Function(List<int>);
  final OnGestureCompleteListener listener;

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

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

class _GesturePathViewState extends State<GesturePathView> {
  // 記錄手指按下或者滑動過程中，經過的最後一個點
  GesturePoint? lastPoint;
  // 記錄手指滑動時的坐标
  Offset? movePos;
  // 記錄手指滑動過程中所有經過的點
  List<GesturePoint> pathPoints = [];

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

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

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

  // 手指擡起
  _onPanEnd(DragEndDetails e) {
    setState(() {
      // 将movePos設定為空，防止畫出最後一個點到手指擡起時的坐标間的直線
      movePos = null;
    });
    // 調用Listener，傳回手勢經過的所有點
    List<int> arr = [];
    if (pathPoints.isNotEmpty) {
      for (var value in pathPoints) {
        arr.add(value.index);
      }
    }   
    widget.listener(arr);
  }
}

// 繪制手勢路徑
class _PathPainter extends CustomPainter {
  // 手指目前的坐标
  final Offset? movePos;
  // 手指經過點集合
  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);
  }

  // 繪制手指一動過程中，經過的所有點之間的直線
  _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);
    }
  }

  // 繪制實時的，最後一個經過點和目前手指坐标間的直線
  _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;
}

組合9個圓點盤和手勢路徑

組合這兩個元件需要用到

Stack

元件，代碼比較簡單，直接上代碼了：

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';

// 定義手勢密碼回調監聽器
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();
    // 計算9個圓點的位置坐标
    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}")
        ],
      ),
    );
  }
}

上傳自定義元件到pub倉庫

上傳自定義元件到Pub倉庫的流程不算很複雜，這裡先放上官方文檔：https://dart.cn/tools/pub/publishing

下面整理釋出插件到pub倉庫的主要步驟：

（這一步非必須但是建議）在github上建立一個項目，并将我們寫的代碼push到該倉庫。（後面配置homepage時可以直接使用GitHub倉庫位址）
在項目根目錄下建立README.md檔案，在其中編寫對于項目的一些介紹，以及你編寫的插件的用法
在項目根目錄下建立CHANGELOG.md檔案，記錄每個不同版本更新了什麼
在項目根目錄下建立一個LICENSE檔案，表明該插件使用什麼開源協定

修改項目中的

pubspec.yaml

檔案，主要修改點有：

homepage: 「填寫項目首頁位址，這裡可以直接用github倉庫位址」
publish_to: 'https://pub.dev' # 這個配置表示要把插件釋出到哪裡
version: 0.0.2 # 插件版本，每次更新記得修改這個version

在項目根目錄下執行

dart pub publish

，首次執行會出現如下提示：

Package has 2 warnings.. Do you want to publish xxx 0.0.1 (y/N)? y
Pub needs your authorization to upload packages on your behalf.
In a web browser, go to https://accounts.google.com/o/oauth2/auth?access_type=offline&approval_prompt=force&response_type=code&client_id=8183068855108-8grd2eg9tjq9f38os6f1urbcvsq39u8n.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A55486&code_challenge=V1-sGcrLkXljXXpOyJdqf8BJfRzBcUQaH9G1m329_M&code_challenge_method=S2536&scope=openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email
Then click "Allow access".

Waiting for your authorization...

點選上面的連結會打開浏覽器，授權即可。授權通過後，控制台會提示上傳完成等資訊。

後記

本篇記錄的Flutter手勢密碼已經上傳到pub倉庫，位址為：https://pub.dev/packages/flutter_gesture_password

該項目的源碼已托管至GitHub：https://github.com/yubo725/flutter-gesture-password

如果大家覺得有幫助，請不吝給個Star支援一下。

手勢密碼的最基本的實作方式就是上面的過程了，在本例中我并未做過多的封裝，也沒有提供更多的配置項比如手勢密碼圓點顔色，路徑線條顔色、粗細等等，這些大家可以根據自己的項目，自行拷貝代碼并做相應修改。另外，手勢密碼的儲存與校驗不在本篇記錄範圍内，大家可以根據最終的整型數組來做一些加密之類并儲存到本地，在校驗密碼時，做字元串比對即可。

Flutter手勢密碼插件從開發到釋出至pub倉庫前言開始上傳自定義元件到pub倉庫後記

前言

開始

繪制圓點

繪制手勢路徑

組合9個圓點盤和手勢路徑

手勢密碼元件的使用

上傳自定義元件到pub倉庫

後記

繼續閱讀

HDU 1330 Deck

輪播圖Banner功能的開發

QT Canvas3D 例子

前端團隊的flutter驗證

準備好了嗎？It's time for Flutter！

Flutter使用流水帳

asp.net使用者自定義控件的方法

Flutter中編解碼Convert基本使用

flutter 崩潰收集一、flutter 崩潰收集的方式二、Flutter異常收集最佳實踐三、Flutter crash 收集平台

flutter阿裡雲OSS圖檔上傳

canvas+js 貪吃蛇實作

HTML5 推箱子遊戲過關示範動畫

HTML5——canvas制作遊戲接住小球

小程式自定義button元件擷取使用者資訊（使用者授權登入）

HTML5Canvas 酷炫效果

Future和async(異步函數)、await(同步等待)