Pincode TextField Widget in Flutter

You are currently viewing Pincode TextField Widget in Flutter
Pincode TextField

Pincode TextField Widget in Flutter


It’s a beautiful and highly customizable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.


Use this package as a library

  1. Depend on it Add this to your package’s pubspec.yaml file:
  pin_code_text_field: <VERSION>

2. Install it You can install packages from the command line: with Flutter:

$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

See also  Tags Input Textfield in Flutter

3. Import it Now in your Dart code, you can use:

import 'package:pin_code_text_field/pin_code_text_field.dart';


isCupertinoboolfalseApplication wrapped in CupertinoApp instead MaterialApp
maxLengthint4The total length of pin number & the number of pin boxes.
hideCharacterboolfalseShow or hide the pin code.
highlightboolfalsehighlight the focused pin box.
highlightAnimationboolfalseanimated highlight of the focused pin box.
highlightAnimationBeginColorColorColors.blackthe starting color of the animated highlight.
highlightAnimationEndColorColorColor.whitethe ending color of the animated highlight.
highlightAnimationDurationDuration500msthe duration of the highlight animation.
highlightColorColorColors.blackSet color of the focused pin box.
pinBoxDecorationBoxDecorationProvidedPinBoxDecoration._defaultPinBoxDecorationCustomization for the individual pin boxes. Check ProvidedPinBoxDecoration for possible options.
pinTextStyleTextStyleTextStyle for styling pin characters.
maskCharacterString“\u25CF”Special character to mask the pin code. Will only work if hideCharacter is set to true.
pinBoxHeightdouble70.0Height of pin boxes.
pinBoxWidthdouble70.0Width of pin boxes.
onDonevoid Function(String)Callback when the max length of pin code is reached.
hasTextBorderColorColorColors.blackSet color of pin box containing text.
pinTextAnimatedSwitcherTransitionFunction(Widget child, Animation animation)Animation of text appearing/disappearing, you can write your own or use a few presets: 1. PinCodeTextField.awesomeTransition 2. PinCodeTextField.defaultScalingTransition 3. PinCodeTextField.defaultRotateTransition
pinTextAnimatedSwitcherDurationDurationconst Duration()Duration of pinTextAnimatedSwitcherTransition. Check ProvidedPinBoxTextAnimation for possible options.
errorBorderColorColorColors.redHighlight all textboxes to this color if hasError is set to true
onTextChangeFunction(String)callback that returns a text on input
hasErrorboolfalseset all border color to errorBorderColor
autofocusboolfalseAutofocus on view entered
wrapAlignmentWrapAlignmentWrapAlignment.startAlignment of the wrapped pin boxes
textDirectionTextDirectionTextDirection.ltrThe direction of the pin code
keyboardTypeTextInputTypeTextInputType.numberThe type of the input keyboard
pinBoxColorColornullColor of the pin boxes (Will be overridden by custom PinBoxDecoration)
pinBoxBorderWidthdouble2Border Width of pin boxes
pinBoxRadiusdouble0The type of the input keyboard
hideDefaultKeyboardbooleanfalseThe type of hide default keyboard
highlightPinBoxColorColorfalseThe background color of the pin box
hasUnderlineboolfalseAdded underline to individual pin box


refer to example/lib/main.dart


  1. Localization (L-R, R-L)
  2. Highlight animation
  3. Pin Box animation
  4. BoxDecoratorBuilder for customizing individual pin boxes
See also  Login, Signup, Logout TextField using Firebase in Flutter

Tips and Tricks:

  1. Copy and pasting Wrap the PinCodeTextField in GestureDetector, the launch an AlertDialog to access the Clipboard and paste the strings to the TextEditController of the PinCodeTextField
Pincode TextField
Pincode TextField
Pincode Text Field

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

See also  Dropdown FormField in Flutter

Spread the love

Leave a Reply