English PinInputTextField是一个Flutter平台上用来展示不同样式的验证码,简单好用!支持所有flutter支持的平台
- 允许你最大化自由的定制任意Shape!
- 内置4种常用验证码风格
- 支持隐藏明文
- 支持填充色
- 支持输入色
- 支持光标
- 理论上支持所有TextField的属性
- 支持Flutter所有平台
现在你可以通过浏览器直接访问这个网址来预览效果,而不需要任何安装。
UnderlineDecoration
BoxLooseDecoration
BoxTightDecoration
CircleDecoration
从pub安装最新版.
PinInputTextField的自定义属性
属性名 | 参考值 | 描述 |
---|---|---|
pinLength | 6 | 验证码的长度, 默认是6 |
onSubmit | (String pin){} | 用户点击键盘右下角时触发,Android平台有时不一定生效 |
decoration | BoxLooseDecoration | 内置三种验证码样式,默认是BoxLooseDecoration |
inputFormatters | WhitelistingTextInputFormatter.digitsOnly | 跟TextField的inputFormatters一样, 默认是WhitelistingTextInputFormatter.digitsOnly |
keyboardType | TextInputType.phone | 跟TextField的keyboardType一样, 默认是TextInputType.phone |
pinEditingController | PinEditingController | 控制和监听用户输入。如果为空,内部会创建一个默认的控制器 |
autoFocus | false | 跟TextField的autoFocus一样, 默认是false |
focusNode | FocusNode | 跟TextField的focusNode一样. |
textInputAction | TextInputAction.done | 跟TextField的textInputAction一样, 数字模式下无效 |
enabled | true | 跟TextField的enabled一样, 默认是true |
onChanged | (String pin){} | 跟TextField的onChanged一样 |
textCapitalization | TextCapitalization.words | 跟TextField的textCapitalization一样 |
cursor | Cursor.disabled() | 验证码的游标,默认不开启 |
请使用PinInputTextFormField来做表单验证.
/// 是否需要替换[obscureText]开启密码模式.
final bool isTextObscure;
/// 当[isTextObscure]开启时,替换验证码的字符串,支持emoji
final String obscureText;
目前PinEditingController
的Listener会在手动设置text值时执行多次,可以在应用层的代码上过滤下