flutter_pin_code_fields 1.2.0

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

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?

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.