Flutter Pin Code Fields

A flutter package which will help you generate customizable pin code fields. Can be used for login pins or OTP.


1. Add Dependency

Add this to your pubspec.yaml file:

    flutter_pin_code_fields: <VERSION>

2. Install

Install the package from command line either using FLutter or Pub:

Using Pub:

$ pub get

Using Flutter:

$ flutter packages get

3. Import Package

Import the package in the Dart file to use it:

import 'package:flutter_pin_code_fields/flutter_pin_code_fields.dart';


lengthintTotal number of pin code fields. This property is required.
controllerTextEditingControllerText editing controller for the fields.
focusNodeFocusNodeFocus node for the fields.
autofocusboolEnable/ disable autofocus on the field. Default is false.
fieldHeightdoubleHeight of the pin code fields.
fieldWidthdoubleWidth of the pin code fields.
enabledboolEnable/ disable editing on the fields. Default is true.
responsiveboolAutomatically adjusts fields to the size of the screen or provided space. Default is true.
obscureTextboolHides the input text of the user. Default is false.
obscureCharacterStringCharacter that replaces the user's input when obscureText is true. Default is '*'.
marginEdgeInsetsProvides margin between fields. Default is EdgeInsets.all(5.0).
paddingEdgeInsetsProvides padding within the fields. Default is EdgeInsets.only(bottom: 5.0).
fieldBorderStyleFieldBorderStyleBorder style of the field. Default is FieldBorderStyle.Bottom. FieldBorderStyle contains: Square, Top, Bottom, Left, Right, TopBottom and LeftRight.
borderWidthdoubleBorder width of the field. Default is 2.0.
borderRadiusBorderRadiusBorder radius of the field. Default is BorderRadius.zero.
borderColorColorColor of the border. Default is Colors.grey.
activeBorderColorColorBorder color of the active/ highlighted field.
fieldBackgroundColorColorBackground color of the fields.
activeBackgroundColorColorBackground color of the active/ highlighted field.
textStyleTextStyleStyle of the text in the fields.
keyboardTypeTextInputTypeType of keyboard to use for the fields. Default is TextInputType.visiblePassword.
autoHideKeyboardboolAutomatically hide keyboard when the user reaches the last field or the first field (by delete). Default is true.
animationAnimationsAnimation for the text in the fields. Default is Animations.Fade. Animations contains: Animations.SlideInUp, Animations.SlideInDown, Animations.SlideInLeft, Animations.SlideInRight, Animations.Grow, Animations.Shrink, Animations.RotateLeft, Animations.RotateRight, Animations.Fade.
animationDurationDurationAnimation duration for the text in the fields. Default is Duration(milliseconds: 150).
animationCurveCurveAnimation curve for the text in the fields. Default is Curves.easeInOut.
switchInAnimationCurveCurveAnimation switch in curve for the text in the fields. Default is Curves.easeIn.
switchOutAnimationCurveCurveAnimation switch out curve for the text in the fields. Default is Curves.easeOut.
onChangeFunction(String)Callback that returns text on input.
onCompleteFunction(String)Callback that returns text on filling all the fields. This property is required.


Default Usage

    length: 4,
    onComplete: (output) {
        // Your logic with pin code
Default Example

Obscure Fields

    length: 6,
    obscureText: true,
    obscureCharacter: '❌',
    onComplete: (output) {
        // Your logic with pin code
Obscure Example

Customized Fields

    length: 4,
    fieldBorderStyle: FieldBorderStyle.Square,
    responsive: false,
    fieldHeight: 130.0,
    fieldWidth: 130.0,
    borderWidth: 5.0,
    activeBorderColor: Colors.teal,
    activeBackgroundColor: Colors.tealAccent,
    borderRadius: BorderRadius.circular(20.0),
    keyboardType: TextInputType.number,
    autoHideKeyboard: false,
    fieldBackgroundColor: Colors.lightGreenAccent,
    borderColor: Colors.lightGreen,
    textStyle: TextStyle(
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
    onComplete: (output) {
        // Your logic with pin code
Custom Example

Animations for text

    length: 4,
    animationDuration: const Duration(milliseconds: 200),
    animationCurve: Curves.easeInOut,
    switchInAnimationCurve: Curves.easeIn,
    switchOutAnimationCurve: Curves.easeOut,
    animation: Animations.SlideInDown,
    onComplete: (output) {
        // Your logic with code
Custom Example Custom Example Custom Example

For complete example, refer example/lib/main.dart.


Star ⭐️ to show support!

Have a new feature to add to this?

  1. Fork it.
  2. Create a branch for your feature (git checkout -b your-feature).
  3. Commit your changes (git commit -m "Feature Description").
  4. Push to the branch (git push origin your-feature).
  5. Create new pull request.