Flutter密码输入插件pin_entry_text_field的使用

👏 PinEntryTextField
这是一个完全可自定义的PIN输入文本框。

源代码为 100% Dart，所有文件都位于 /lib 文件夹中。

Show some ❤️ 和 star 支持项目

GIF

💻 安装

在 pubspec.yaml 文件的 dependencies: 部分添加以下行：

pin_entry_text_field: ^0.1.3

当前版本：^0.1.3

❔ 使用

导入这个类

import 'package:pin_entry_text_field/pin_entry_text_field.dart';

在任何需要获取PIN或OTP的地方使用该小部件，唯一必需的属性是 onSubmit 回调

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: PinEntryTextField(
      onSubmit: (String pin) {
        showDialog(
          context: context,
          builder: (context) {
            return AlertDialog(
              title: Text("Pin"),
              content: Text('Pin entered is $pin'),
            );
          },
        ); // end showDialog()
      }, // end onSubmit
    ),
  );
}

🎨 自定义和属性

以下是 PinEntryTextField 的所有可定制属性：

👍 如何贡献

1. Fork 该项目
2. 创建新的功能分支 (git checkout -b my-new-feature)
3. 提交更改 (git commit -am 'Add some feature')
4. 推送到分支 (git push origin my-new-feature)
5. 创建新的 Pull Request

📃 许可证

Copyright (c) 2018 Godson Ositadinma

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Getting Started

对于如何开始使用Flutter，请查看我们的在线 文档。

对于如何编辑包代码，请查看 文档。

完整示例代码

以下是一个完整的示例代码，展示如何使用 pin_entry_text_field 插件：

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

class ExamplePinEntry extends StatelessWidget {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Pin Entry Example"),
      ),
      body: Container(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: PinEntryTextField(
            showFieldAsBox: true, // 设置为true后，每个文本框会显示为矩形框
            onSubmit: (String pin) {
              // 当用户输入PIN后触发此回调
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: Text("Pin"),
                    content: Text('Pin entered is $pin'), // 显示用户输入的PIN
                  );
                },
              ); // 结束对话框
            }, // 结束onSubmit
          ), // 结束PinEntryTextField
        ), // 结束Padding
      ), // 结束Container
    );
  }
}