Flutter 手勢密碼控件

一個Flutter編寫的手勢識別驗證鎖。

例子

設置密碼例子

GestureView(
    immediatelyClear: true,
    size: MediaQuery.of(context).size.width,
    onPanUp: (List<int> items) {
      setState(() {
        result = items;
      });
    },
)

驗證密碼例子

GlobalKey<GestureState> gestureStateKey = GlobalKey();

GestureView(
    key: this.gestureStateKey,
    size: MediaQuery.of(context).size.width*0.8,
    selectColor: Colors.blue,
    onPanUp: (List<int> items) {
      analysisGesture(items);
    },
    onPanDown: () {
      gestureStateKey.currentState.selectColor = Colors.blue;
      setState(() {
        status = 0;
      });
    },
)

基本思想

• 先使用畫布繪製背景: 九個圓點,每個點帶屬性是否被選中、顏色、寬度信息。
• 在繪製線條: 被選中的點按順序相互連接，最後一個點和手指當前位置繪製成一條直線。
• 放回回饋函數: 手指按下和擡起時觸發相應函數，可以做判斷結果當擡起時，按下時可以更改顏色當再次輸入時。

項目地址

包地址