app_otp 1.0.8

A simple OTP widget for flutter.

Usage

import 'package:flutter/material.dart';
import 'package:app_otp/app_otp.dart';

AppOTPTextField(
  onCompleted: (otp) {
    // Called when all OTP boxes are filled.
    debugPrint('Completed OTP: $otp');
  },
  onChanged: (otp) {
    // Called whenever the OTP value changes.
    debugPrint('Current OTP: $otp');
  },
)

Configuration

AppOTPTextField provides the following options for configuring the OTP input:

Field	Type	Default	Description
onCompleted	ValueChanged<String>	Required	Called when the number of entered characters reaches digits. The callback receives the complete OTP value.
onChanged	ValueChanged<String>?	null	Called whenever the entered OTP changes. The callback receives the current, possibly incomplete, value.
onAppOTPTextFieldCreated	AppOTPTextFieldControllerCallback?	null	Called when the widget is initialized and provides an AppOTPTextFieldController that can be used to control the field.
digits	int	6	Sets the number of OTP boxes and the maximum number of entered characters. Must be at least 1.
boxFocusBorderColor	Color	Colors.blue	Sets the border color of the focused box.
boxUnFocusBorderColor	Color	Color(0xFFCCCCCC)	Sets the border color of boxes that do not yet contain an entered character.
boxBorderRadius	double	12	Sets the corner radius of every OTP box.
boxBorderWidth	double	1.6	Sets the thickness of every OTP box border.
boxHeight	double	48	Sets the height of every OTP box.
boxWidth	double	48	Sets the width of every OTP box.
autofocus	bool	true	Automatically focuses the hidden text input and opens the keyboard when the widget is displayed.
keyboardType	TextInputType	TextInputType.number	Selects the type of keyboard displayed by the platform. It controls keyboard suggestions and layout; it does not validate the entered value.
boxOTPTextStyle	TextStyle	fontSize: 16, fontWeight: FontWeight.w500, color: Colors.black87	Sets the text style used for the character displayed in each OTP box.
showCursor	bool	true	Shows or hides the custom cursor in the active OTP box.
cursorColor	Color	Colors.blue	Sets the color of the custom cursor.
cursorHeight	double	24	Sets the height of the custom cursor.
cursorWidth	double	1.6	Sets the width of the custom cursor.
cursorBlinkInterval	Duration	300ms	Sets the animation interval used by the blinking cursor.
enabled	bool	true	Enables or disables text entry and tapping on the OTP boxes.

For example, the appearance and behavior can be customized like this:

AppOTPTextField(
  digits: 4,
  boxHeight: 52,
  boxWidth: 44,
  boxBorderRadius: 8,
  boxBorderWidth: 2,
  boxFocusBorderColor: Colors.deepPurple,
  boxUnFocusBorderColor: Colors.grey,
  boxOTPTextStyle: const TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.deepPurple,
  ),
  autofocus: false,
  keyboardType: TextInputType.number,
  showCursor: true,
  cursorColor: Colors.deepPurple,
  cursorHeight: 26,
  cursorWidth: 2,
  cursorBlinkInterval: const Duration(milliseconds: 400),
  enabled: true,
  onChanged: (otp) {},
  onCompleted: (otp) {},
)

Controller

Use onAppOTPTextFieldCreated to keep a reference to the controller. The controller currently provides clear(), which clears the OTP value and calls onChanged with an empty string.

AppOTPTextFieldController? otpController;

AppOTPTextField(
  onAppOTPTextFieldCreated: (controller) {
    otpController = controller;
  },
  onCompleted: (otp) {},
)

// Clear the entered OTP when needed.
otpController?.clear();