Flutter 手势密码

Flutter 手势密码 Widget。

效果

使用

  • pubspec.yaml 中添加以下依赖
dependencies:
  flutter_lock_widget: '^0.1.1'
  • 安装
flutter packages get

在 VS Code 下会自动安装

  • 在文件中导入
import 'package:flutter_lock_widget/lock_container.dart';
import 'package:flutter_lock_widget/circle.dart';

说明

circle.dart

该文件中主要包括手势密码的基本控件及样子属性设置

  • class CircleAttribute:用于设置手势密码的整体样式;
  • class Circle:九宫格中圆的数据结构;
  • enum CircleState:圆的状态,分普通状态和选中状态;
  • enum LockState:手势密码整体的状态,分普通状态和出错状态;

circle_painter.dart

  • class CirclePainter:绘制圆

lock_widget.dart

  • class LockWidget:手势密码区域 Widget。在此类中检测手势操作,并绘制手势路线;

lock_container.dart

  • class LockContainer:手势密码容器,可以根据需要修改;目前只包含一个提示文本和手势密码;

示例

详细示例可以查看 example 目录下的工程,以下是 set.dart 的代码

import 'package:flutter/material.dart';

import 'package:flutter_lock_widget/lock_container.dart';
import 'package:flutter_lock_widget/circle.dart';

import './confirm.dart';

class LockSetPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _LockSetPageState();
  }
}

class _LockSetPageState extends State<LockSetPage> {

  LockState _lockState = LockState.normal;

  GlobalKey<ScaffoldState> scaffoldState = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('设置手势密码'),
      ),
      body: Column(
        children: <Widget>[
          LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              return Container(
                // color: Colors.red,
                margin: const EdgeInsets.only(top: 100.0),
                child: LockContainer(
                  initMessage: '请设置手势密码',
                  errorMessage: '手势密码最少 4 位',
                  completeCallback: _checkPassword,
                ),
              );
            },
          )
        ],
      ),
    );
  }

  bool _checkPassword(String password) {

    if (password.length < 4) {
      return false;
    }

    Navigator.push(context, MaterialPageRoute(
      builder: (context) => LockConfirmPage(password: password,)
    ));

    return true;
  }
}

参考

flutter_gesture_password

Libraries

circle
circle_painter
lock_container
lock_widget