pin_input_text_field 4.1.2 icon indicating copy to clipboard operation
pin_input_text_field: ^4.1.2 copied to clipboard

A textField widget to help display different style pin written in pure dart, no extra dependency.

pub package GitHub GitHub top language

pin_input_text_field #

δΈ­ζ–‡ 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 πŸ¦€ #

Thanks to the Flutter Web, you can enjoy the preview by website without any installation.

Decoration #





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 Just like TextField's keyboardType, the default is
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;

Notice ⚠️ #

Version 3.2.0 #

Cursor property would override HintText due to the conflict display in same paint position.

If you have any idea, please make a Pull Request.

Known Issue πŸ₯Ά #

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

pub points


verified publisher

A textField widget to help display different style pin written in pure dart, no extra dependency.



API reference


Icon for licenses.Apache-2.0 (LICENSE)




Packages that depend on pin_input_text_field