Flutter Otp Field

Customizable OTP field.

pub package GitHub top language

Checkout example project


  1. Run this command:
$ flutter pub add flutterotpfield

or manually add this to your pubspec.yaml

  flutterotpfield: ^0.0.3
  1. Import package
import 'package:flutterotpfield/flutterotpfield.dart';
  1. Use FlutterOtpField widget
inputFieldLength: 6,
spaceBetweenFields: 10,
onValueChange: (String value) {
print("otp changed $value");
onCompleted: (String value) {
print("otp  $value");


Name Default Value Description Required/Optional
inputFieldLength No default value Length of the otp boxes Required
inputFieldHeight 50 Height of the single otp field Optional
inputFieldWidth 50 Width of the single otp field Optional
otpWidgetHeight 50 Height of the otp widget Optional
spaceBetweenFields 5 Space between two otp fields Optional
autoFocus true Focus of the first otp field Optional
onValueChange - Callback function. When single field value is changed, you'll receive value in the onValueChange. Required
onCompleted - Callback function. When all otp fields are filled, you'll receive otp value in the onCompleted. Required
inputDecoration - Input decoration for the otp field Optional
cursorColor Black Color of the cursor Optional
scrollPhysics NeverScrollableScrollPhysics ScrollPhysics for otp widget Optional