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

一个高度可定制的一次性密码输入框。

屏幕截图

成功模式	普通模式	可定制化	错误模式

加载模式	可定制化加载模式	普通使用

代码片段

简单使用

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

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

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

class _SimpleUseState extends State<SimpleUse> {
  OtpTextFieldsController otpTextFieldsController = OtpTextFieldsController();

  void changeMode(OtpState otpState) {
    // 改变模式以改变设计
    // 模式 => {success, loading, error, normal}
    otpTextFieldsController.currentState.value = otpState;
  }

  void changeOtpValues(String otpValue) {
    // 如果你有自动填充短信功能，你应该使用这个
    otpTextFieldsController.otpValue.value = otpValue;
  }

  @override
  Widget build(BuildContext context) {
    return OtpTextFields(
      otpLength: 5,
      otpTextFieldsController: otpTextFieldsController,
      defaultTextStyle: const TextStyle(fontSize: 18, color: Colors.black),
    );
  }
}

使用所有可定制参数

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

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

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

class _CustomUseState extends State<CustomUse> {
  OtpTextFieldsController otpTextFieldsController = OtpTextFieldsController();

  void changeMode(OtpState otpState) {
    // 改变模式以改变设计
    // 模式 => {success, loading, error, normal}
    otpTextFieldsController.currentState.value = otpState;
  }

  void changeOtpValues(String otpValue) {
    // 如果你有自动填充短信功能，你应该使用这个
    otpTextFieldsController.otpValue.value = otpValue;
  }

  @override
  Widget build(BuildContext context) {
    return OtpTextFields(
      otpLength: 5,
      otpTextFieldsController: otpTextFieldsController,
      defaultTextStyle: const TextStyle(fontSize: 18, color: Colors.black),
      textStyleLoading: const TextStyle(fontSize: 18, color: Colors.blue),
      // 文本样式当模式为加载时
      textStyleSuccess: const TextStyle(fontSize: 18, color: Colors.green),
      // 文本样式当模式为成功时
      textStyleError: const TextStyle(fontSize: 18, color: Colors.red),
      // 文本样式当模式为错误时
      textStyleActive: const TextStyle(fontSize: 18, color: Colors.black),
      // 文本样式当模式为正常且焦点在文本框内时
      textStyleFilled: const TextStyle(fontSize: 18, color: Colors.grey),
      // 文本样式当模式为正常且焦点不在文本框内时
      decorationSuccessBox: BoxDecoration(
        color: Colors.green,
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.black, width: 3),
        borderRadius: BorderRadius.all(Radius.circular(5)),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(3, 3),
          )
        ],
      ),
      // 成功模式下的容器装饰
      decorationErrorBox: BoxDecoration(
        color: Colors.red,
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.black, width: 3),
        borderRadius: BorderRadius.all(Radius.circular(5)),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(3, 3),
          )
        ],
      ),
      // 错误模式下的容器装饰
      decorationLoadingBox: BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.black, width: 3),
        borderRadius: BorderRadius.all(Radius.circular(5)),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(3, 3),
          )
        ],
      ),
      // 加载模式下的容器装饰
      decorationActiveBox: BoxDecoration(
        color: Colors.grey,
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.black, width: 3),
        borderRadius: BorderRadius.all(Radius.circular(5)),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(3, 3),
          )
        ],
      ),
      // 正常模式且焦点不在文本框内的容器装饰
      decorationFilledBox: BoxDecoration(
        color: Colors.black,
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.black, width: 3),
        borderRadius: BorderRadius.all(Radius.circular(5)),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(3, 3),
          )
        ],
      ),
      // 正常模式且文本已填写的容器装饰
      decorationEmptyBox: BoxDecoration(
        color: Colors.white,
        shape: BoxShape.rectangle,
        border: Border.all(color: Colors.black, width: 3),
        borderRadius: BorderRadius.all(Radius.circular(5)),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(3, 3),
          )
        ],
      ), // 正常模式且文本为空的容器装饰
    );
  }
}

当你用代码填写OTP时，将显示动画：

otpTextFieldsController.otpValue.value = otpValue;

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

itying888 1楼

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

fancy_otp_text_fields 是一个用于 Flutter 的插件，专门用于实现一次性密码（OTP）输入界面。它提供了美观且可定制的 OTP 输入框，支持多种样式和配置选项。以下是如何在 Flutter 项目中使用 fancy_otp_text_fields 插件的步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 fancy_otp_text_fields 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  fancy_otp_text_fields: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 fancy_otp_text_fields 插件：

import 'package:fancy_otp_text_fields/fancy_otp_text_fields.dart';

3. 使用 FancyOtpTextField

你可以使用 FancyOtpTextField 组件来创建一个 OTP 输入框。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fancy OTP Text Fields Example'),
        ),
        body: Center(
          child: FancyOtpTextField(
            length: 6,  // OTP 的长度
            onChanged: (value) {
              print("Current OTP: $value");
            },
            onSubmit: (value) {
              print("Submitted OTP: $value");
            },
          ),
        ),
      ),
    );
  }
}

4. 自定义样式

FancyOtpTextField 提供了多种自定义选项，你可以根据自己的需求调整样式。以下是一些常见的配置选项：

FancyOtpTextField(
  length: 4,  // OTP 的长度
  fieldWidth: 50.0,  // 每个输入框的宽度
  fieldHeight: 50.0,  // 每个输入框的高度
  borderRadius: 10.0,  // 输入框的圆角半径
  borderColor: Colors.grey,  // 边框颜色
  focusBorderColor: Colors.blue,  // 焦点状态下的边框颜色
  textStyle: TextStyle(fontSize: 20.0, color: Colors.black),  // 文本样式
  obscureText: true,  // 是否隐藏输入的文本（显示为圆点）
  onChanged: (value) {
    print("Current OTP: $value");
  },
  onSubmit: (value) {
    print("Submitted OTP: $value");
  },
);

5. 处理 OTP 输入

FancyOtpTextField 提供了 onChanged 和 onSubmit 回调函数，用于处理 OTP 输入的变化和提交事件。你可以在这些回调函数中执行相应的逻辑，例如验证 OTP 或提交表单。

6. 其他功能

fancy_otp_text_fields 还支持其他功能，例如自动聚焦、清除输入、自定义键盘类型等。你可以查阅插件的文档或源代码以了解更多高级用法。

7. 示例代码

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fancy OTP Text Fields Example'),
        ),
        body: Center(
          child: FancyOtpTextField(
            length: 6,
            fieldWidth: 50.0,
            fieldHeight: 50.0,
            borderRadius: 10.0,
            borderColor: Colors.grey,
            focusBorderColor: Colors.blue,
            textStyle: TextStyle(fontSize: 20.0, color: Colors.black),
            obscureText: true,
            onChanged: (value) {
              print("Current OTP: $value");
            },
            onSubmit: (value) {
              print("Submitted OTP: $value");
            },
          ),
        ),
      ),
    );
  }
}