otp_plus #

A customizable Flutter OTP (One-Time Password) input widget package inspired by popular pin code fields libraries. otp_plus offers enhanced flexibility, styling, and input management for OTP or PIN entry, supporting both individual input boxes and paste detection with seamless input distribution.

Features #

• Multiple OTP input fields with customizable length
• Paste support with automatic digit splitting across fields
• Obscured input option (e.g., for password-style OTP)
• Flexible styling: shape (square, underline, circle), size, spacing
• Keyboard navigation and backspace focus handling
• Customizable cursor appearance and behavior
• RTL and LTR text direction support
• Complete control over input decoration and text style
• Callback on OTP completion to easily handle entered codes

Installation #

Add this to your pubspec.yaml:

dependencies:
  otp_plus: ^0.0.4

Then run:

flutter pub get

Usage #

import 'package:flutter/material.dart';
import 'package:otp_plus/otp_plus_inputs.dart'; // Adjust the import path accordingly

class MyOtpScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Enter OTP')),
      body: Center(
        child: OtpPlusInputs(
          length: 6,
          shape: OtpFieldShape.underline,
          obscureText: false,
          spacing: 16,
          size: 50,
          borderColor: Colors.grey,
          focusedBorderColor: Colors.blue,
          errorBorderColor: Colors.red,
          onCompleted: (code) {
            // Handle OTP verification here
            print('OTP Entered: $code');
          },
        ),
      ),
    );
  }
}

API Reference #

OtpPlusInputs #

OtpFieldShape #

Defines the visual style of the OTP input fields:

• square: Square bordered fields
• underline: Underline style
• circle: Circular bordered fields

Notes #

• Paste handling currently does not support web platform due to clipboard API limitations.
• The widget automatically manages focus navigation between fields on input and backspace key presses.
• Use onCompleted to capture the final OTP code when all fields are filled.
• The widget uses TextInputFormatter to restrict input to single digits.

Contribution #

Contributions and improvements are welcome! Feel free to open issues or pull requests.

License #

This project is licensed under the MIT License.