Different Style Pin Input TextField

You are currently viewing Different Style Pin Input TextField
Pin TextField in Flutter

Different Style Pin Input TextField

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


  • 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
See also  Simple Card View with List View Builder using Flutter








Install the latest version from pub.



Customizable attributes for PinInputTextField

Attribute NameExample ValueDescription
pinLength6The 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.
decorationBoxLooseDecorationDecorate the pin, there are 3 inside styles, the default is BoxLooseDecoration
inputFormattersWhitelistingTextInputFormatter.digitsOnlyJust like TextField’s inputFormatter, the default is WhitelistingTextInputFormatter.digitsOnly
keyboardTypeTextInputType.phoneJust like TextField’s keyboardType, the default is TextInputType.phone
pinEditingControllerPinEditingControllerControls the pin being edited. If null, this widget will create its own PinEditingController
autoFocusfalseSame as TextField’s autoFocus, the default is false
focusNodeFocusNodeSame as TextField’s focusNode
textInputActionTextInputAction.doneSame as TextField’s textInputAction, not working in digit mode
enabledtrueSame as TextField’s enabled, the default is true
onChanged(String pin){}Same as TextField’s onChanged
textCapitalizationTextCapitalization.wordsSame as TextField’s textCapitalization
cursorCursor.disabled()The cursor of the pin, default is not enabled


Instead of using PinInputTextField, using PinInputTextFormField to control validate.

See also  A Focusable and Blurable TextField Widget in Flutter


/// 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.

This is developed by TinoGuo
Download this project from the below link.
You can visit original source page from the below link:

See also  Password TextFormField for Flutter with Validation

Spread the love

Leave a Reply