/flutter_verification_box

验证码输入框

Primary LanguageDartApache License 2.0Apache-2.0

引入

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