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

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

原作者

flutter_verification_box 2.0.0

引入

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

dependencies:
  f_verification_box: ^0.0.1

导入包：

import 'package:f_verification_box/f_verification_box.dart';

使用

基本用法如下：

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

效果如下：

设置验证码的数量

可以设置验证码的位数，例如设置为4位：

VerificationBox(
  count: 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,
)

效果如下：

自定义装饰

如果对默认样式不满意，可以完全自定义装饰：

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,
)

完整示例代码

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('验证码输入框示例')),
        body: Center(
          child: VerificationBoxExample(),
        ),
      ),
    );
  }
}

class VerificationBoxExample extends StatefulWidget {
  [@override](/user/override)
  _VerificationBoxExampleState createState() => _VerificationBoxExampleState();
}

class _VerificationBoxExampleState extends State<VerificationBoxExample> {
  String _inputValue = '';

  void _onSubmitted(String value) {
    setState(() {
      _inputValue = value;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 默认样式
        VerificationBox(
          onSubmitted: _onSubmitted,
        ),
        SizedBox(height: 20),
        Text('输入结果: $_inputValue'),
        SizedBox(height: 20),

        // 设置数量为4
        VerificationBox(
          count: 4,
          onSubmitted: _onSubmitted,
        ),
        SizedBox(height: 20),

        // 自定义边框样式
        VerificationBox(
          borderColor: Colors.lightBlue,
          borderWidth: 3,
          borderRadius: 50,
          onSubmitted: _onSubmitted,
        ),
        SizedBox(height: 20),

        // 下划线样式
        VerificationBox(
          type: VerificationBoxItemType.underline,
          onSubmitted: _onSubmitted,
        ),
        SizedBox(height: 20),

        // 自定义数字样式
        VerificationBox(
          textStyle: TextStyle(fontSize: 20, color: Colors.green),
          onSubmitted: _onSubmitted,
        ),
        SizedBox(height: 20),

        // 带光标的样式
        VerificationBox(
          showCursor: true,
          cursorWidth: 2,
          cursorColor: Colors.red,
          onSubmitted: _onSubmitted,
        ),
        SizedBox(height: 20),

        // 自定义装饰
        VerificationBox(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/box.png'),
            ),
          ),
          textStyle: TextStyle(fontSize: 20, color: Colors.blue),
          onSubmitted: _onSubmitted,
        ),
      ],
    );
  }
}