• Underline or box style fields, fully customizable colors and borders
• Smart focus handling — auto-advance on input, backspace jumps to the previous field
• Paste & SMS autofill support — a pasted or autofilled code is distributed across the fields
• Programmatic control via OtpFieldController (set, clear, focus)
• Obscure text support for sensitive PINs
• Error state styling with a single flag
• Always renders left-to-right, even in RTL locales
• Accessibility labels for every digit field

From the gallery of designs in the example app:

Add the package to your pubspec.yaml:

dependencies:
  otp_text_field: ^1.1.5

Or install it from the command line:

flutter pub add otp_text_field

Then import it:

import 'package:otp_text_field/otp_text_field.dart';

The single import above exports everything (OTPTextField, OtpFieldController, OtpFieldStyle, FieldStyle). You can also import otp_field.dart, otp_field_style.dart, and style.dart individually if you prefer.

OTPTextField(
  length: 5,
  width: MediaQuery.of(context).size.width,
  fieldWidth: 80,
  style: TextStyle(fontSize: 17),
  textFieldAlignment: MainAxisAlignment.spaceAround,
  fieldStyle: FieldStyle.underline,
  onChanged: (pin) {
    print("Changed: " + pin);
  },
  onCompleted: (pin) {
    print("Completed: " + pin);
  },
),

• onChanged fires on every edit with the current (possibly partial) pin.
• onCompleted fires once every field is filled, with the full pin.

OTPTextField(
  length: 4,
  width: MediaQuery.of(context).size.width,
  fieldWidth: 56,
  fieldStyle: FieldStyle.box,
  outlineBorderRadius: 12,
  otpFieldStyle: OtpFieldStyle(
    backgroundColor: Colors.grey.shade100,
    borderColor: Colors.grey,
    focusBorderColor: Colors.deepPurple,
  ),
  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  onCompleted: (pin) => verifyOtp(pin),
),

Attach an OtpFieldController to clear, prefill, or focus the fields from your own code — for example after a failed verification or a "resend code" tap:

final OtpFieldController otpController = OtpFieldController();

OTPTextField(
  controller: otpController,
  length: 4,
  onCompleted: (pin) => verifyOtp(pin),
),

// Later:
otpController.clear();                        // clear all fields, focus the first one
otpController.set(['1', '2', '3', '4']);      // prefill the whole pin
otpController.setValue('7', 2);               // set a single field (position 2)
otpController.setFocus(0);                    // move focus to a field

The controller must be attached to a built OTPTextField before calling its methods, otherwise a StateError is thrown. set() expects exactly length entries.

Pass AutofillHints.oneTimeCode to enable one-tap SMS code autofill on iOS and Android. The autofilled code is automatically spread across the fields:

OTPTextField(
  length: 6,
  autofillHints: [AutofillHints.oneTimeCode],
  onCompleted: (pin) => verifyOtp(pin),
),

Set hasError: true to render every field with the errorBorderColor — for example after the server rejects the code:

OTPTextField(
  length: 4,
  hasError: _otpInvalid,
  otpFieldStyle: OtpFieldStyle(errorBorderColor: Colors.red),
  onChanged: (_) => setState(() => _otpInvalid = false),
  onCompleted: (pin) => verifyOtp(pin),
),

OTPTextField(
  length: 4,
  obscureText: true,
  onCompleted: (pin) => verifyPin(pin),
),

For more designs, check out the example app.

• Focus flow: typing a digit moves focus to the next field; the keyboard is dismissed after the last one. Deleting a digit moves focus back. Pressing backspace on an already-empty field also jumps back.
• Typing over a digit: focusing a filled field selects its content, so typing replaces the digit instead of appending to it.
• Paste & autofill: a multi-character value (paste or SMS autofill) is filtered through your inputFormatters, distributed across the fields from the start, and any leftover fields are cleared.
• RTL locales: the fields are always laid out left-to-right, since verification codes are read left-to-right.

• Vivek Kaushik

OTP Text Field is released under the MIT license. See LICENSE for details.