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

Name	Type	Description
length	int	Total number of pin code fields. This property is `required`.
controller	TextEditingController	Text editing controller for the fields.
focusNode	FocusNode	Focus node for the fields.
autofocus	bool	Enable/ disable autofocus on the field. Default is `false`.
fieldHeight	double	Height of the pin code fields.
fieldWidth	double	Width of the pin code fields.
enabled	bool	Enable/ disable editing on the fields. Default is `true`.
responsive	bool	Automatically adjusts fields to the size of the screen or provided space. Default is `true`.
obscureText	bool	Hides the input text of the user. Default is `false`.
obscureCharacter	String	Character that replaces the user's input when `obscureText` is `true`. Default is *`''`**.
margin	EdgeInsets	Provides margin between fields. Default is `EdgeInsets.all(5.0)`.
padding	EdgeInsets	Provides padding within the fields. Default is `EdgeInsets.only(bottom: 5.0)`.
fieldBorderStyle	FieldBorderStyle	Border style of the field. Default is `FieldBorderStyle.Bottom`. FieldBorderStyle contains: `Square`, `Top`, `Bottom`, `Left`, `Right`, `TopBottom` and `LeftRight`.
borderWidth	double	Border width of the field. Default is `2.0`.
borderRadius	BorderRadius	Border radius of the field. Default is `BorderRadius.zero`.
borderColor	Color	Color of the border. Default is `Colors.grey`.
activeBorderColor	Color	Border color of the active/ highlighted field.
fieldBackgroundColor	Color	Background color of the fields.
activeBackgroundColor	Color	Background color of the active/ highlighted field.
textStyle	TextStyle	Style of the text in the fields.
keyboardType	TextInputType	Type of keyboard to use for the fields. Default is `TextInputType.visiblePassword`.
autoHideKeyboard	bool	Automatically hide keyboard when the user reaches the last field or the first field (by delete). Default is `true`.
animation	Animations	Animation 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`.
animationDuration	Duration	Animation duration for the text in the fields. Default is `Duration(milliseconds: 150)`.
animationCurve	Curve	Animation curve for the text in the fields. Default is `Curves.easeInOut`.
switchInAnimationCurve	Curve	Animation switch in curve for the text in the fields. Default is `Curves.easeIn`.
switchOutAnimationCurve	Curve	Animation switch out curve for the text in the fields. Default is `Curves.easeOut`.
onChange	Function(String)	Callback that returns text on input.
onComplete	Function(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);
    },
),

Obscure Fields

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

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);
    },
),

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);
    },
),

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

Contribute

Star ⭐️ to show support!

Have a new feature to add to this?

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

AmenyaZ/flutter_pin_code_fields