天天看點
傳回

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

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

前言

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

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

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

開始

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

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

繪制圓點

我們使用面向對象的方式來處理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

來實作。

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

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

梳理了上面的手勢密碼繪制流程後，我們還需要了解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倉庫的主要步驟：

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

    pubspec.yaml

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

    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支援一下。

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

Google Flutter Flutter 手勢密碼 自定義元件 canvas painter
上一篇: substance painter學習2——建立項目
下一篇: HDU 2476 String painter 區間DPString painter

繼續閱讀