Flutter验证码输入框插件flutter_verification_box的使用

Flutter验证码输入框插件flutter_verification_box的使用

引入

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_verification_box: ^2.0.0

导入包：

import 'package:flutter_verification_box/verification_box.dart';

使用

基础使用

Container(
  height: 45,
  child: VerificationBox(),
)

效果如下：

基础效果

设置验证码数量

设置验证码的数量，例如设置为4个：

VerificationBox(
  count: 4,
)

效果如下：

数量为4的效果

设置样式

设置边框的颜色、宽度和圆角：

VerificationBox(
  borderColor: Colors.lightBlue,
  borderWidth: 3,
  borderRadius: 50,
)

效果如下：

设置边框样式

支持下划线样式

除了“盒子”样式，还支持下划线样式：

VerificationBox(
  type: VerificationBoxItemType.underline,
)

效果如下：

下划线样式

设置数字样式

设置数字的样式：

VerificationBox(
  textStyle: TextStyle(color: Colors.lightBlue),
)

效果如下：

设置数字样式

显示光标并设置光标样式

显示光标并设置光标样式：

VerificationBox(
  showCursor: true,
  cursorWidth: 2,
  cursorColor: Colors.red,
  cursorIndent: 10,
  cursorEndIndent: 10,
)

效果如下：

显示光标

设置光标为整个边框

设置光标为整个边框：

VerificationBox(
  focusBorderColor: Colors.lightBlue,
)

效果如下：

光标为整个边框

自定义装饰

如果你对默认效果不满意，可以自定义decoration：

VerificationBox(
  decoration: BoxDecoration(
    image: DecorationImage(image: AssetImage('images/box.png')),
  ),
  textStyle: TextStyle(color: Colors.lightBlue),
),

效果如下：

自定义装饰

验证码输入完成回调

验证码输入完成后，可以通过onSubmitted回调获取输入值：

VerificationBox(
  onSubmitted: (value) {
    print('$value');
  },
)

控制键盘是否消失

输入完成后，默认键盘会消失。如果希望键盘不消失，可以设置unfocus属性为false：

VerificationBox(
  unfocus: false,
)

更多关于Flutter验证码输入框插件flutter_verification_box的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


flutter_verification_box 是一个用于创建验证码输入框的 Flutter 插件。它允许用户输入固定长度的验证码，并且可以自定义样式和交互行为。以下是如何使用 flutter_verification_box 的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_verification_box 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_verification_box: ^0.0.3  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 flutter_verification_box 包：

import 'package:flutter_verification_box/flutter_verification_box.dart';

3. 使用 VerificationBox

VerificationBox 是一个用于输入验证码的小部件。你可以通过设置 length 属性来指定验证码的长度，并通过 onSubmitted 回调来获取用户输入的验证码。

class VerificationCodeInput extends StatefulWidget {
  @override
  _VerificationCodeInputState createState() => _VerificationCodeInputState();
}

class _VerificationCodeInputState extends State<VerificationCodeInput> {
  String _verificationCode = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Verification Code Input'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            VerificationBox(
              length: 6,  // 验证码的长度
              onSubmitted: (code) {
                setState(() {
                  _verificationCode = code;
                });
              },
            ),
            SizedBox(height: 20),
            Text('Entered Code: $_verificationCode'),
          ],
        ),
      ),
    );
  }
}

4. 自定义样式

VerificationBox 提供了一些属性来自定义样式，例如 textStyle、cursorColor、decoration 等。

VerificationBox(
  length: 6,
  onSubmitted: (code) {
    setState(() {
      _verificationCode = code;
    });
  },
  textStyle: TextStyle(fontSize: 24, color: Colors.black),
  cursorColor: Colors.blue,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
    borderRadius: BorderRadius.circular(8),
  ),
)

5. 处理输入完成事件

onSubmitted 回调会在用户完成输入时触发，你可以在这个回调中处理验证码的提交逻辑。

VerificationBox(
  length: 6,
  onSubmitted: (code) {
    // 处理验证码提交逻辑
    print('Submitted code: $code');
    // 你可以在这里调用 API 来验证验证码
  },
)

6. 其他选项

VerificationBox 还提供了一些其他选项，例如 autoFocus、keyboardType、onChanged 等，你可以根据需要进一步自定义。

VerificationBox(
  length: 6,
  autoFocus: true,
  keyboardType: TextInputType.number,
  onChanged: (value) {
    print('Current input: $value');
  },
  onSubmitted: (code) {
    print('Submitted code: $code');
  },
)
回到顶部