Flutter一次性验证码输入插件otp_input_editor的使用

otp_input_editor 是一个用于Flutter应用的可定制的一次性密码（OTP）输入字段包。它允许用户从任何位置编辑OTP文本字段，并提供清除和隐藏功能。

特性

• 支持自定义OTP输入字段外观。
• 允许在输入字段内的任意位置编辑OTP。
• 提供OTP更改的回调函数。
• 可指定OTP长度。

安装

在你的 pubspec.yaml 文件中添加以下行：

dependencies:
  otp_input_editor: <latest-version> # 替换为最新版本

运行 flutter pub get 来安装这个包。

使用

首先导入包：

import 'package:otp_input_editor/otp_input_editor.dart';

然后在你的Flutter应用中使用 OtpInputEditor 小部件，提供必要的参数：

OtpInputEditor get _getOtpEditor {
  return OtpInputEditor(
    obscureText: !_showOtp,
    otpLength: 6,
    onOtpChanged: (value) {
      print(value);
      setState(() {
        _otpData = value;
      });
    },
    onInitialization: (OtpInputController otpInputController) {
      setState(() {
        _otpInputController = otpInputController;
      });
    },
    invalid: false,
    otpTextFieldBackgroundColor: Colors.white,
    cursorHeight: 25,
    boxShadow: const [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 2.0,
        spreadRadius: 1.0,
      ),
    ],
    fieldWidth: 40.0,
    fieldHeight: 40.0,
    cursorWidth: 1.5,
    textInputStyle: const TextStyle(
      fontSize: 20.0,
      color: Colors.black,
      fontWeight: FontWeight.bold,
    ),
    boxDecoration: BoxDecoration(
      border: Border.all(
        color: Colors.grey,
        width: 1.0,
      ),
      borderRadius: BorderRadius.circular(5.0),
    ),
  );
}

参数说明

• otpLength（必需）：OTP的长度。
• onOtpChanged（可选）：当OTP发生变化时触发的回调函数。
• invalid（可选）：是否处于无效状态。
• otpTextFieldBackgroundColor（可选）：OTP输入字段的背景颜色。
• boxShadow（可选）：用于样式的阴影列表。
• fieldWidth 和 fieldHeight（可选）：每个OTP输入字段的宽度和高度。
• cursorWidth 和 cursorHeight（可选）：光标的宽度和高度。
• textInputStyle（可选）：文本输入的样式。
• boxDecoration（可选）：OTP输入字段的装饰。
• obscureText（可选）：是否隐藏显示输入的OTP。
• onInitialization（可选）：此回调提供了 OtpInputController，以获取更多控制权限，如清除和获取OTP字段数据。

示例代码

以下是完整的示例代码，展示了如何使用 otp_input_editor 包：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OTP INPUT FIELD',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: const OtpInputField(),
    );
  }
}

class OtpInputField extends StatefulWidget {
  const OtpInputField({super.key});

  [@override](/user/override)
  State<OtpInputField> createState() => _OtpInputFieldState();
}

class _OtpInputFieldState extends State<OtpInputField> {
  String _otpData = "";
  OtpInputController? _otpInputController;
  bool _showOtp = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appBar,
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ..._getOtpText,
              _getOtpEditor,
              _spacer,
              _clearOtpButton,
              _hideOrShowButton,
            ],
          ),
        ),
      ),
    );
  }

  SizedBox get _spacer {
    return const SizedBox(height: 5);
  }

  Row get _hideOrShowButton {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextButton(
          onPressed: () {
            setState(() {
              _showOtp = !_showOtp;
            });
          },
          child: Row(
            children: _showOtp
                ? [
                    const Icon(Icons.visibility_off),
                    const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 8),
                      child: Text("Hide"),
                    )
                  ]
                : [
                    const Icon(Icons.visibility),
                    const Padding(
                      padding: EdgeInsets.symmetric(horizontal: 8),
                      child: Text("Show"),
                    )
                  ],
          ),
        ),
      ],
    );
  }

  Row get _clearOtpButton {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        InkWell(
          key: const Key("clear-key"),
          onTap: () {
            if (_otpInputController != null) {
              _otpInputController!.clear();
              _otpData = _otpInputController?.otp ?? "";
              setState(() {});
            }
          },
          child: const Text(
            "Clear OTP",
            style: TextStyle(
              color: Colors.blue,
              fontSize: 17,
              decoration: TextDecoration.underline,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ],
    );
  }

  OtpInputEditor get _getOtpEditor {
    return OtpInputEditor(
      key: const Key("otp-field"),
      obscureText: !_showOtp,
      otpLength: 6,
      onOtpChanged: (value) {
        print(value);
        setState(() {
          _otpData = value;
        });
      },
      onInitialization: (OtpInputController otpInputController) {
        setState(() {
          _otpInputController = otpInputController;
        });
      },
      invalid: false,
      otpTextFieldBackgroundColor: Colors.white,
      cursorHeight: 25,
      boxShadow: const [
        BoxShadow(
          color: Colors.black12,
          blurRadius: 2.0,
          spreadRadius: 1.0,
        ),
      ],
      fieldWidth: 40.0,
      cursorWidth: 1.5,
      textInputStyle: const TextStyle(
        fontSize: 20.0,
        color: Colors.black,
        fontWeight: FontWeight.bold,
      ),
      boxDecoration: BoxDecoration(
        border: Border.all(
          color: Colors.grey,
          width: 1.0,
        ),
        borderRadius: BorderRadius.circular(5.0),
      ),
    );
  }

  AppBar get _appBar {
    return AppBar(
      title: const Text(
        "OTP Input Editor Example",
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      centerTitle: true,
    );
  }

  List<Widget> get _getOtpText {
    return [
      const Text(
        "Entered Otp:",
        style: TextStyle(
          fontSize: 25,
          fontWeight: FontWeight.bold,
        ),
      ),
      const SizedBox(height: 10),
      Text(
        key: const Key("otp-value"),
        _otpData,
        style: const TextStyle(
          fontSize: 30,
          fontWeight: FontWeight.bold,
        ),
      ),
      const SizedBox(height: 30),
    ];
  }
}