Description:

flutter verification box

引入 #
dependencies:
flutter_verification_box: ^2.0.0
copied to clipboard
导入包：
import 'package:flutter_verification_box/verification_box.dart';
copied to clipboard
使用 #
Container(
height: 45,
child: VerificationBox(),
)
copied to clipboard
效果如下：

设置验证码的数量，比如设置4个：
VerificationBox(
count: 4,
)
copied to clipboard
效果如下：

设置样式，包括边框的颜色、宽度、圆角：
VerificationBox(
borderColor: Colors.lightBlue,
borderWidth: 3,
borderRadius: 50,
)
copied to clipboard
效果如下：

除了“盒子”样式，还支持下划线样式：
VerificationBox(
type: VerificationBoxItemType.underline,
)
copied to clipboard
效果如下：

设置数字的样式：
VerificationBox(
textStyle: TextStyle(color: Colors.lightBlue),
)
copied to clipboard
效果如下：

显示光标，设置光标样式：
VerificationBox(
showCursor: true,
cursorWidth: 2,
cursorColor: Colors.red,
cursorIndent: 10,
cursorEndIndent: 10,
)
copied to clipboard
效果如下：

还可以设置光标为整个边框，如下：
VerificationBox(
focusBorderColor: Colors.lightBlue,
)
copied to clipboard
效果如下：

终极大招，如果你觉得这个效果不好，你可以自定义decoration：
VerificationBox(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('images/box.png')),
),
textStyle: TextStyle(color: Colors.lightBlue),
),
)
copied to clipboard
效果如下：

验证码输入完成后回调onSubmitted，用法如下：
VerificationBox(
onSubmitted: (value){
print('$value');
},
)
copied to clipboard
输入完成后，默认键盘消失，设置为不消失，代码如下：
VerificationBox(
unfocus: false,
)
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter