otp_plus #

A customizable Flutter OTP (One-Time Password) input widget package with automatic fill sms code. 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 #

• Fill code automatic from SMS
• 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

![OTP Plus Demo]

Installation #

Add this to your pubspec.yaml:

dependencies:
  otp_plus: ^1.1.0

Then run:

flutter pub get

Usage #

import 'package:flutter/material.dart';
import 'package:otp_plus/otp_plus_inputs.dart';

class MyOtpScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Enter OTP')),
      body: Center(
        child: OtpPlusInputs(
          size: 50,
          length: 6,
          shape: OtpFieldShape.square,
          textDirection: TextDirection.ltr,
          onChanged: (code) {
            debugPrint('On Changed : $code');
          },
          onSubmit: (code) {
            debugPrint('On Submit : $code');
          },
          //Add optional values here
          onCompleted: (code) {
            // Add OTP verification logic here
            debugPrint('OTP entered: $code');
          },
        ),
      ),
    );
  }
}

API Reference #

OtpPlusInputs Parameters #

OtpFieldShape #

Defines the visual style of the OTP input fields:

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

Notes #

• 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.