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 #

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.