mo_2fa_code 0.0.1

A customizable 2FA / OTP code input for Flutter. Set the length and cell style; get auto-advance, backspace navigation, paste and autofill for free.

mo_2fa_code

A customizable one-character-per-cell code input for 2FA / OTP screens. Set the length you need, style the cells your way, and get the fiddly parts for free:

• Auto-advance to the next cell while typing, keyboard dismissed when done
• Backspace navigation — jumps back and clears the previous cell, on both soft and hardware keyboards
• Paste & autofill — pasting or SMS/email one-time-code autofill distributes the code across the cells
• Type-over — tapping a filled cell selects its character so typing replaces it
• Form integration — it is a FormField<String>, so validator works exactly like with TextFormField
• Input filtering — numeric, alphanumeric or any characters, with optional upper/lower case transform
• Optional controller to read, set or clear the code programmatically

Usage

import 'package:mo_2fa_code/mo_2fa_code.dart';

Mo2FACodeField(
  length: 6,
  onCompleted: (code) => verify(code),
)

That's it — 6 numeric cells with a Material 3 look.

With a Form, validation and a controller

final _formKey = GlobalKey<FormState>();
final _codeController = Mo2FACodeController();

Form(
  key: _formKey,
  child: Mo2FACodeField(
    length: 5,
    controller: _codeController,
    autoFocus: true,
    inputType: Mo2FAInputType.alphanumeric,
    caseTransform: Mo2FACaseTransform.upperCase,
    validator: (code) =>
        (code ?? '').length == 5 ? null : 'Enter the full 5 character code',
    onCompleted: (code) => verify(code),
  ),
)

// Confirm button:
if (_formKey.currentState!.validate()) {
  verify(_codeController.code);
}

// After a failed verification:
_codeController.clear();

Styling

Simple tweaks through Mo2FACodeStyle:

Mo2FACodeField(
  length: 4,
  obscureText: true,
  style: const Mo2FACodeStyle(
    cellWidth: 56,
    cellHeight: 64,
    spacing: 8,
    textStyle: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
    cursorColor: Colors.indigo,
  ),
)

Full control per cell with decorationBuilder (focus and error aware):

Mo2FACodeStyle(
  decorationBuilder: (context, index, {required hasFocus, required hasError}) {
    return InputDecoration(
      filled: true,
      fillColor: hasFocus ? Colors.indigo.shade50 : Colors.grey.shade100,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(16),
        borderSide: BorderSide.none,
      ),
    );
  },
)

API overview

Parameter	Default	Description
length	6	Number of characters in the code
inputType	numeric	numeric, alphanumeric or any
caseTransform	none	upperCase, lowerCase or none
onChanged	—	Fired on every change with the partial code
onCompleted	—	Fired once every cell is filled
controller	—	Mo2FACodeController to read / set / clear the code
validator	—	Standard FormField validator, receives the full code string
obscureText	false	Hide characters (see Mo2FACodeStyle.obscuringCharacter)
autoFocus	false	Focus the first cell on mount
keyboardType	derived	Override the keyboard derived from inputType
autofillHints	[oneTimeCode]	Autofill hints for the first cell; pass [] to disable
style	Mo2FACodeStyle()	Cell size, spacing, text style, decoration, error style

See the example for a complete 2FA screen.