Flutter手势密码插件gesture_password_widget的使用

简介

GesturePasswordWidget 是一个为Flutter提供的手势解锁小部件，支持高度自定义。用户可以通过滑动屏幕上的点来设置或验证手势密码。它提供了多种属性来自定义样式和行为，并且易于集成到现有的Flutter项目中。

使用方法

添加依赖

在pubspec.yaml文件中添加gesture_password_widget的依赖：

dependencies:
  gesture_password_widget: latest-version

导入包

在需要使用的Dart文件顶部导入：

import 'package:gesture_password_widget/gesture_password_widget.dart';

示例代码

以下是一个完整的示例，展示了如何创建一个基本的手势密码界面以及更复杂的效果。

完整Demo

import 'package:flutter/material.dart';
import 'package:gesture_password_widget/gesture_password_widget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GesturePasswordWidgetDemo(),
    );
  }
}

const backgroundColor = Color(0xff252534);

class GesturePasswordWidgetDemo extends StatefulWidget {
  @override
  _GesturePasswordWidgetDemoState createState() => _GesturePasswordWidgetDemoState();
}

class _GesturePasswordWidgetDemoState extends State<GesturePasswordWidgetDemo> {
  String? result;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: Container(
        width: double.infinity,
        child: Column(
          children: [
            Container(
              margin: EdgeInsets.only(top: 150.0, bottom: 10.0),
              child: Text(
                '正确答案：0, 1, 2, 4, 7',
                textAlign: TextAlign.start,
                style: TextStyle(
                  fontSize: 22.0,
                  color: Colors.white,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 20.0),
              height: 80,
              child: Text(
                '结果：${result ?? ''}',
                textAlign: TextAlign.start,
                style: TextStyle(
                  fontSize: 22.0,
                  color: Colors.white,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: 30.0),
              child: createNormalGesturePasswordView(),
            ),
          ],
        ),
      ),
    );
  }

  /// 创建一个简单常用的手势密码视图。
  Widget createNormalGesturePasswordView() {
    return GesturePasswordWidget(
      lineColor: const Color(0xff0C6BFE),
      errorLineColor: const Color(0xffFB2E4E),
      singleLineCount: 3,
      identifySize: 80.0,
      minLength: 4,
      errorItem: Image.asset(
        'images/error.png',
        color: const Color(0xffFB2E4E),
      ),
      normalItem: Image.asset('images/normal.png'),
      selectedItem: Image.asset(
        'images/selected.png',
        color: const Color(0xff0C6BFE),
      ),
      arrowItem: Image.asset(
        'images/arrow.png',
        width: 20.0,
        height: 20.0,
        color: const Color(0xff0C6BFE),
        fit: BoxFit.fill,
      ),
      errorArrowItem: Image.asset(
        'images/arrow.png',
        width: 20.0,
        height: 20.0,
        fit: BoxFit.fill,
        color: const Color(0xffFB2E4E),
      ),
      answer: [0, 1, 2, 4, 7],
      color: backgroundColor,
      onComplete: (data) {
        setState(() {
          result = data.join(', ');
        });
      },
    );
  }

  /// 创建一个复杂的示例。
  /// 每行有四个点，并通过设置[hitItem]支持选择效果。
  Widget createXiMiGesturePasswordView() {
    return GesturePasswordWidget(
      lineColor: Colors.white,
      errorLineColor: Colors.redAccent,
      singleLineCount: 4,
      identifySize: 80.0,
      minLength: 4,
      hitShowMilliseconds: 40,
      errorItem: Container(
        width: 10.0,
        height: 10.0,
        decoration: BoxDecoration(
          color: Colors.redAccent,
          borderRadius: BorderRadius.circular(50.0),
        ),
      ),
      normalItem: Container(
        width: 10.0,
        height: 10.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(50.0),
        ),
      ),
      selectedItem: Container(
        width: 10.0,
        height: 10.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(50.0),
        ),
      ),
      hitItem: Container(
        width: 15.0,
        height: 15.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(50.0),
        ),
      ),
      answer: [0, 1, 2, 3, 6, 10, 14],
      color: backgroundColor,
      onComplete: (data) {
        setState(() {
          result = data.join(', ');
        });
      },
    );
  }
}

属性说明

通过以上内容，您应该能够轻松地将GesturePasswordWidget集成到您的Flutter应用中，并根据需求进行定制化配置。如果您有任何问题或者需要进一步的帮助，请随时提问！