Flutter Pin Code Fields

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

Installation

1. Add Dependency

Add this to your pubspec.yaml file:

dependencies:
    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';

Properties

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

Examples

Default Usage

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

Obscure Fields

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

Customized Fields

PinCodeFields(
    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
        print(output);
    },
),
Custom Example

Animations for text

PinCodeFields(
    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
        print(output);
    },
),
Custom Example Custom Example Custom Example

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

Contribute

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.

Libraries

flutter_pin_code_fields