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

发布于 1周前 作者 h691938207 来自 Flutter

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

自定义的一次性密码输入字段。

自定义OTP字段的完整示例代码可以查看示例项目。

安装

  1. 运行以下命令：
$ flutter pub add flutterotpfield

或者手动添加到你的pubspec.yaml文件中：

dependencies:
  flutterotpfield: ^0.0.3
  1. 导入包
import 'package:flutterotpfield/flutterotpfield.dart';
  1. 使用FlutterOtpField小部件
FlutterOtpField(
  inputFieldLength: 6,
  spaceBetweenFields: 10,
  onValueChange: (String value) {
    print("otp changed $value");
  },
  onCompleted: (String value) {
    print("otp  $value");
  },
)

文档

名称 默认值 描述 必须/可选
inputFieldLength 无默认值 OTP框的数量 必须
inputFieldHeight 50 单个OTP框的高度 可选
inputFieldWidth 50 单个OTP框的宽度 可选
otpWidgetHeight 50 OTP小部件的高度 可选
spaceBetweenFields 5 两个OTP框之间的间距 可选
autoFocus true 第一个OTP框是否自动获取焦点 可选
onValueChange 无默认值 回调函数。当单个字段的值发生变化时，你会收到新的值。 必须
onCompleted 无默认值 回调函数。当所有OTP框都填满时，你会收到完整的OTP值。 必须
inputDecoration 无默认值 OTP框的输入装饰 可选
cursorColor 黑色 光标颜色 可选
scrollPhysics NeverScrollableScrollPhysics OTP小部件的滚动物理属性 可选

完整示例代码

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

void main() {
  runApp(const OtpScreen());
}

class OtpScreen extends StatefulWidget {
  const OtpScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State<OtpScreen> createState() => _OtpScreenState();
}

class _OtpScreenState extends State<OtpScreen> {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const SizedBox(height: 50,),
          // 默认设计
          FlutterOtpField(
            inputFieldLength: 6,
            spaceBetweenFields: 10,
            onValueChange: (String value) {
              print("otp changed $value");
            },
            onCompleted: (String value) {
              print("otp  $value");
            },
          ),
          const SizedBox(height: 50,),
          // 自定义输入框设计
          Center(child: FlutterOtpField(
            inputFieldLength: 6,
            spaceBetweenFields: 10,
            inputDecoration: InputDecoration(
                constraints: const BoxConstraints(maxHeight: 46),
                fillColor: Colors.transparent,
                filled: true,
                hintText: "0",
                counterText: "",
                hintStyle: const TextStyle(
                    color: Color(0xff656565),
                    fontSize: 14,
                    fontWeight: FontWeight.w500),
                enabledBorder: OutlineInputBorder(
                    borderSide: const BorderSide(
                        color: Color(0xff969696),
                        width: 1.0),
                    borderRadius:
                    BorderRadius.circular(8)),
                focusedBorder: OutlineInputBorder(
                    borderSide: const BorderSide(
                        color: Color(0xff969696),
                        width: 1.0),
                    borderRadius:
                    BorderRadius.circular(8))),
            onValueChange: (String value) {
              print("otp changed $value");
            },
            onCompleted: (String value) {
              print("otp  $value");
            },
          )),
          const SizedBox(height: 30,),
          Center(child: FlutterOtpField(
            inputFieldLength: 4,
            spaceBetweenFields: 10,
            inputDecoration: InputDecoration(
                constraints: const BoxConstraints(maxHeight: 46),
                fillColor: Colors.transparent,
                filled: true,
                hintText: "#",
                counterText: "",
                hintStyle: const TextStyle(
                    color: Color(0xff656565),
                    fontSize: 14,
                    fontWeight: FontWeight.w500),
                enabledBorder: OutlineInputBorder(
                    borderSide: const BorderSide(
                        color: Color(0xff969696),
                        width: 1.0),
                    borderRadius:
                    BorderRadius.circular(30)),
                focusedBorder: OutlineInputBorder(
                    borderSide: const BorderSide(
                        color: Color(0xff969696),
                        width: 1.0),
                    borderRadius:
                    BorderRadius.circular(30))),
            onValueChange: (String value) {
              print("otp changed $value");
            },
            onCompleted: (String value) {
              print("otp  $value");
            },
          )),
        ],
      )
    );
  }
}

更多关于Flutter一次性密码输入插件flutterotpfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter一次性密码输入插件flutterotpfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用flutter_otp_field插件的一个示例代码。这个插件允许你创建一个用于一次性密码（OTP）输入的界面，通常用于短信验证码或双重认证（2FA）场景。

首先，确保你已经在pubspec.yaml文件中添加了flutter_otp_field依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_otp_field: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何使用flutter_otp_field：

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

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

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

class OTPScreen extends StatefulWidget {
  @override
  _OTPScreenState createState() => _OTPScreenState();
}

class _OTPScreenState extends State<OTPScreen> {
  final GlobalKey<OTPFieldState> _otpFieldKey = GlobalKey();
  String _otp = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OTP Input Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Enter the OTP sent to your phone:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 16),
            OTPField(
              key: _otpFieldKey,
              length: 6, // OTP length
              width: 50,
              height: 50,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey, width: 1),
                borderRadius: BorderRadius.circular(8),
              ),
              style: TextStyle(fontSize: 24),
              onCompleted: (otp) {
                setState(() {
                  _otp = otp;
                });
                print('OTP entered: $_otp');
                // Here you can handle the OTP submission, e.g., sending it to your server
              },
            ),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                // Simulate a button press to fill OTP fields for testing
                // This is just for demonstration purposes, in a real app this would not be needed
                _otpFieldKey.currentState?.fillOTP('123456');
              },
              child: Text('Fill OTP'),
            ),
            SizedBox(height: 16),
            Text(
              'Current OTP: $_otp',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖安装：首先在pubspec.yaml文件中添加flutter_otp_field依赖。

  2. 主应用结构：MyApp是一个简单的Material应用，包含一个OTPScreen作为首页。

  3. OTP输入界面：OTPScreen是一个状态管理Widget，包含一个OTPField用于输入OTP。

  4. OTPField：

    • key: 用于控制OTPField的状态。
    • length: OTP的长度，这里设置为6。
    • width和height: 每个OTP输入框的宽度和高度。
    • decoration: 输入框的装饰，这里设置了边框和圆角。
    • style: 输入框的文本样式。
    • onCompleted: 当OTP输入完成时的回调，这里我们简单地打印了输入的OTP。

  5. 模拟填充OTP：一个ElevatedButton用于模拟填充OTP字段，仅用于演示目的。

在实际应用中，你会在onCompleted回调中处理OTP的验证逻辑，比如将其发送到服务器进行验证。

这个示例提供了一个基础的OTP输入界面，你可以根据需要进一步自定义和扩展。

回到顶部