djytwy / flutter_verification_box

验证码输入框

引入

dependencies:
  flutter_verification_box: ^2.0.0

导入包：

import 'package:flutter_verification_box/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,
)

效果如下：

终极大招，如果你觉得这个效果不好，你可以自定义decoration：

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

效果如下：

验证码输入完成后回调onSubmitted，用法如下：

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

输入完成后，默认键盘消失，设置为不消失，代码如下：

VerificationBox(
  unfocus: false,
)