Flutter Verification Code Field

A flutter package which contains a verification code field with a number of advantages, namely with the ability to customize your own validation pattern, customize the number of OTP fields or their size, as well as the spacing between OTP fields, also supports text insertion or character replacement in any cell.


Platform


Table of contents

Installing

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_verification_code_field: ^1.0.0

2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter pub get

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_verification_code_field/flutter_verification_code_field.dart';

Usage

VerificationCodeField is a Hook Widget that can be used for OTP verification. Include it in your code like:

    VerificationCodeField(
      length: 5,
      onFilled: (value) => print(value),
      size: Size(30, 60),
      spaceBetween: 16,
      matchingPattern: RegExp(r'^\d+$'),
    );

It has many configurable properties, including:

  • length – Number of the OTP Fields
  • size – Size of the single OTP Field
  • spaceBetween – Space between the OTP fields
  • matchingPattern – Pattern for validation

There are also custom callback:

  • onFilled – Callback function that is called when the verification code is filled

Bugs or Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I'll look into it. Pull request are also welcome.

Libraries

flutter_verification_code_field