Flutter图案锁插件pattern_lock的使用

插件简介

Pattern Lock 是一个Flutter插件，它提供了一个图形密码锁的小部件。通过该小部件，用户可以设置和验证图形密码。这个插件简单易用，并且可以通过多种属性来自定义样式。

你可以通过访问 Demo 页面来查看在线演示效果。

使用方法

在你的项目中使用 PatternLock 小部件非常简单。下面是一个基本的例子，展示了如何创建一个带有自定义样式的图案锁：

PatternLock(
  // 已选点的颜色。
  selectedColor: Colors.red,
  // 点的半径。
  pointRadius: 8,
  // 是否显示用户的输入并高亮已选点。
  showInput: true,
  // 水平和垂直方向上的点数。
  dimension: 3,
  // 点区域的内边距，相对于点之间的距离的比例。
  relativePadding: 0.7,
  // 输入与点的距离阈值，用于选择点。
  selectThreshold: 25,
  // 是否填充点。
  fillPoints: true,
  // 用户完成输入时调用的回调函数。如果用户选择了至少一个点，则会触发此回调。
  onInputComplete: (List<int> input) {
    print("pattern is $input");
  },
);

示例代码

这里有一个完整的示例应用程序，它包括了图案的设置、检查功能，以及一个大尺寸的图案锁展示。你可以直接复制这段代码到你的项目中进行测试：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pattern Lock Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
      routes: {
        "/check_pattern": (BuildContext context) => CheckPattern(),
        "/set_pattern": (BuildContext context) => SetPattern(),
        "/big_pattern": (BuildContext context) => BigPattern(),
      },
      home: Scaffold(
        appBar: AppBar(
          title: Text("Pattern Lock Demo"),
        ),
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatefulWidget {
  @override
  _HomeWidgetState createState() => _HomeWidgetState();
}

class _HomeWidgetState extends State<HomeWidget> {
  List<int>? pattern;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'This is demo of "Pattern Lock" Flutter library',
            style: TextStyle(fontSize: 16),
          ),
          SizedBox(height: 4),
          InkWell(
            child: Text(
              'https://github.com/qwert2603/pattern_lock',
              style: TextStyle(fontSize: 16, color: Colors.deepOrange),
            ),
            onTap: () => launch("https://github.com/qwert2603/pattern_lock"),
          ),
          SizedBox(height: 4),
          InkWell(
            child: Text(
              'https://pub.dev/packages/pattern_lock',
              style: TextStyle(fontSize: 16, color: Colors.deepOrange),
            ),
            onTap: () => launch("https://pub.dev/packages/pattern_lock"),
          ),
          SizedBox(height: 24),
          MaterialButton(
            color: Colors.lightGreen,
            child: Text("Set Pattern", style: TextStyle(color: Colors.white)),
            onPressed: () async {
              final result = await Navigator.pushNamed(context, "/set_pattern");
              if (result is List<int>) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("pattern is $result")),
                );
                setState(() {
                  pattern = result;
                });
              }
            },
          ),
          if (pattern != null) ...[
            SizedBox(height: 16),
            MaterialButton(
              color: Colors.green,
              child: Text("Check Pattern", style: TextStyle(color: Colors.white)),
              onPressed: () async {
                final result = await Navigator.pushNamed(
                  context,
                  "/check_pattern",
                  arguments: pattern,
                );
                if (result == true) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text(
                        "it's correct",
                        style: TextStyle(color: Colors.green),
                      ),
                    ),
                  );
                }
              },
            ),
          ],
          SizedBox(height: 24),
          MaterialButton(
            color: Colors.red,
            child: Text("Big Pattern", style: TextStyle(color: Colors.white)),
            onPressed: () => Navigator.pushNamed(context, "/big_pattern"),
          ),
        ],
      ),
    );
  }
}

请注意，在实际应用中，你需要根据自己的需求实现 CheckPattern, SetPattern 和 BigPattern 这三个页面的具体逻辑。上述代码仅作为演示用途，帮助你了解如何集成和使用 PatternLock 组件。

更多详细信息，请参阅 GitHub仓库 中提供的完整示例项目。