Flutter一次性密码输入插件otp_text_field的使用

手机截图

安装

要开始使用otp_text_field，您需要在pubspec.yaml文件中添加依赖项：

dependencies:
  otp_text_field: ^latest_version # 请用实际的最新版本号替换latest_version

然后，在您的Dart文件中导入以下包：

import 'package:otp_text_field/otp_field.dart';
import 'package:otp_text_field/style.dart';

使用方法

基本用法

下面是一个简单的例子，演示如何在Flutter应用中创建一个包含5个输入框的一次性密码（OTP）输入组件。我们将设置每个输入框的宽度、样式，并为完成输入时提供回调函数。

OTPTextField(
  length: 5, // OTP长度
  width: MediaQuery.of(context).size.width, // 组件宽度
  fieldWidth: 80, // 每个输入框的宽度
  style: TextStyle(fontSize: 17), // 输入文本样式
  textFieldAlignment: MainAxisAlignment.spaceAround, // 输入框之间的对齐方式
  fieldStyle: FieldStyle.underline, // 输入框样式：下划线或方框
  onCompleted: (pin) {
    print("Completed: " + pin); // 当用户完成输入时触发
  },
),

示例Demo

这里给出一个完整的示例程序，它不仅展示了OTP输入框的基本功能，还提供了清除输入内容的功能。

import 'package:flutter/material.dart';
import 'package:otp_text_field/otp_field.dart';
import 'package:otp_text_field/otp_text_field.dart';
import 'package:otp_text_field/style.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome Credit Card Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'OTP Input Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  OtpFieldController otpController = OtpFieldController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.clear),
        onPressed: () {
          print("Clear button was pressed.");
          otpController.clear(); // 清除所有输入框的内容
        },
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Center(
          child: OTPTextField(
            controller: otpController,
            length: 6, // 这里修改为6位数的OTP
            width: MediaQuery.of(context).size.width,
            textFieldAlignment: MainAxisAlignment.spaceAround,
            fieldWidth: 45,
            fieldStyle: FieldStyle.box,
            outlineBorderRadius: 15,
            style: TextStyle(fontSize: 17),
            onChanged: (pin) {
              print("Changed: " + pin);
            },
            onCompleted: (pin) {
              print("Completed: " + pin);
            },
          ),
        ),
      ),
    );
  }
}

此代码段创建了一个带有顶部标题栏的应用页面，页面中心有一个用于输入六位数字OTP的组件，以及一个浮动按钮用于清除已输入的内容。当用户输入完成时，会在控制台打印出完整的OTP值。此外，每当输入发生变化时也会输出当前部分输入的值到控制台。

作者

• Vivek Kaushik

许可证

OTP Text Field 是根据MIT许可证发布的。详细信息请参阅LICENSE。

希望这些信息能帮助你更好地理解和使用otp_text_field插件！如果有任何问题或者需要进一步的帮助，请随时提问。