otp_autofill_field 1.0.0

Self-contained Flutter OTP field: PIN UI with automatic Android SMS Retriever and iOS one-time-code keyboard autofill, plus a resend timer. No external OTP/PIN dependency.

otp_autofill_field

A self-contained OTP input for Flutter. It does not depend on pin_code_fields or sms_autofill — both are reimplemented here, fixing their long-standing bugs:

[otp_autofill_field demo]

Old packages	otp_autofill_field
pin_code_fields: one TextField per cell → broken paste, soft-keyboard backspace skipping cells, autofill filling only cell 1	One hidden input behind the cells → paste, backspace and OTP autofill all correct
sms_autofill: native receiver + Dart stream leak; double listenForCode() registers two receivers; ~5 min timeout is silent	Own SMS Retriever bridge: stop()/dispose() cancel the stream and unregister the receiver; start() is idempotent; listenTimeout + onTimeout
Controller auto-disposed by the widget → "used after disposed"	Field never disposes a caller-supplied controller
SMS + last keystroke both fire onCompleted	De-duplicated: fires exactly once
iOS often wired so the retriever is armed pointlessly	iOS uses native oneTimeCode keyboard autofill (the only path Apple allows)

Install

dependencies:
  otp_autofill_field: ^1.0.0

Usage

import 'package:otp_autofill_field/otp_autofill_field.dart';

AutoOtpField(
  length: 6,
  onCompleted: (code) => verify(code),   // fires exactly once
  onAutoFill: (code) => print('from SMS: $code'),
  onTimeout: () => print('no SMS in 5 min'),
);

Clear / shake on a failed check:

final controller = AutoOtpController();

AutoOtpField(
  controller: controller,
  onCompleted: (code) {
    if (code != expected) {
      controller.triggerError(); // shakes the field, marks error
      controller.clearCode();
    }
  },
);
// You created `controller`, so you dispose it. The field never will.

Resend cooldown

A theme-adaptive, fully customizable 1-minute (default) resend countdown:

OtpResendTimer(
  // duration: Duration(minutes: 1),   // default
  onResend: () async => await api.requestOtp(phone), // timer auto-restarts
);

Custom UI via builders (defaults to a Material text + button):

OtpResendTimer(
  onResend: requestOtp,
  builder: (context, remaining) =>
      Text('Resend available in ${remaining.inSeconds}s'),
  resendBuilder: (context, resend) =>
      OutlinedButton(onPressed: resend, child: const Text('Send again')),
);

Drive it from elsewhere with an OtpResendController (start / restart / stop, remaining, canResend).

Android setup

The SMS Retriever API needs no permissions. The SMS just has to end with your app's 11-character signature:

final signature = await AutoOtp.getAppSignature(); // null off Android

Backend message format:

Your code is 123456

FA+9qCX9VSu

Optional phone-number hint picker:

final phone = await AutoOtp.requestPhoneHint();

Requirements: minSdkVersion >= 21 and Google Play services on the device (the plugin pulls play-services-auth-api-phone itself).

iOS setup

Nothing to do. The field is wrapped in an AutofillGroup and advertises AutofillHints.oneTimeCode, so iOS reads the code from Messages and offers it above the keyboard automatically. Apple does not permit apps to read SMS, so this keyboard suggestion is the supported "automatic" path on iOS.

API

• AutoOtpField — the widget: length, controller, onCompleted, onAutoFill, onTimeout, autoStart, autoStopOnCompleted, reArmOnClear, listenTimeout, smsCodeRegExp, theme, obscureText, obscuringCharacter, mainAxisAlignment, enabled.
• AutoOtpController — code, setCode(value, maxLength:), clearCode(), triggerError(), clearError(), requestFocus(), hasError.
• AutoOtpTheme / AutoOtpShape — box / underline / circle, sizes, colors; any unset color resolves from the ambient ThemeData.
• OtpResendTimer / OtpResendController — resend cooldown (default 1 min), theme-adaptive, customizable via builder / resendBuilder.
• OtpPinField — the standalone PIN cells, if you want them without SMS.
• OtpRetriever — the standalone leak-free SMS Retriever bridge.
• AutoOtp.getAppSignature(), AutoOtp.requestPhoneHint(), AutoOtp.isSmsRetrievalSupported.

License

MIT © Fayziddin2000