Different Style Pin Input TextField

PinInputTextField is a TextField widget to help display different style pin. It supports all the platforms flutter supports.

Feature 

• allow you customized the shape, any!
• built-in 4 commonly used pin styles of shape
• obscure support
• solid support
• enterColor support
• cursor support
• support all the textField properties theoretically
• Flutter all platform support

Example 

Decoration

UnderlineDecoration

BoxLooseDecoration

BoxTightDecoration

CircleDecoration

Installing 

Install the latest version from pub.

Usage 

Attributes

Customizable attributes for PinInputTextField

Attribute Name	Example Value	Description
pinLength	6	The max length of pin, the default is 6
onSubmit	(String pin){}	The callback will execute when user click done, sometimes is not working in Android.
decoration	BoxLooseDecoration	Decorate the pin, there are 3 inside styles, the default is BoxLooseDecoration
inputFormatters	WhitelistingTextInputFormatter.digitsOnly	Just like TextField’s inputFormatter, the default is WhitelistingTextInputFormatter.digitsOnly
keyboardType	TextInputType.phone	Just like TextField’s keyboardType, the default is TextInputType.phone
pinEditingController	PinEditingController	Controls the pin being edited. If null, this widget will create its own PinEditingController
autoFocus	false	Same as TextField’s autoFocus, the default is false
focusNode	FocusNode	Same as TextField’s focusNode
textInputAction	TextInputAction.done	Same as TextField’s textInputAction, not working in digit mode
enabled	true	Same as TextField’s enabled, the default is true
onChanged	(String pin){}	Same as TextField’s onChanged
textCapitalization	TextCapitalization.words	Same as TextField’s textCapitalization
cursor	Cursor.disabled()	The cursor of the pin, default is not enabled

FormField

Instead of using PinInputTextField, using PinInputTextFormField to control validate.

ObscureStyle

/// Determine whether replace [obscureText] with number.
final bool isTextObscure;
/// The display text when [isTextObscure] is true, emoji supported
final String obscureText;

Known Issue

The PinEditingController listener will execute more than once when programmatically set text, you can filter some duplicate values in your code.

Credits:
This is developed by TinoGuo
Download this project from the below link.
https://github.com/TinoGuo/pin_input_text_field/archive/refs/heads/master.zip
You can visit original source page from the below link:
https://github.com/TinoGuo/pin_input_text_field