flutter_pin_code_fields 1.1.0

Flutter Android iOS web

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

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.
3
likes
110
pub points
74%
popularity

Publisher

sanifhimani.com

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_pin_code_fields