otpBox method

Widget otpBox({ required TextEditingController controller, required FocusNode focusNode, required ValueChanged<String> onChanged, bool autofocus = false, })

One digit box of the OTP entry; the dialog renders one per digit, with auto-advance and auto-verify like the web widget.

Implementation

Widget otpBox({
  required TextEditingController controller,
  required FocusNode focusNode,
  required ValueChanged<String> onChanged,
  bool autofocus = false,
}) {
  final decoration =
      (theme.inputUnderline
              ? underlineInputDecoration(hint: '')
              : otpInputDecoration(hint: ''))
          .copyWith(
            counterText: '',
            hintText: null,
            labelText: null,
            isDense: true,
            // Centre the digit and make the field fill the whole box.
            contentPadding: EdgeInsets.symmetric(
              vertical: ((otpBoxSize.height - 26) / 2).clamp(0, 48),
            ),
          );
  final field = TextField(
    controller: controller,
    focusNode: focusNode,
    autofocus: autofocus,
    keyboardType: TextInputType.number,
    textAlign: TextAlign.center,
    textAlignVertical: TextAlignVertical.center,
    style: otpTextStyle.copyWith(letterSpacing: 0),
    obscureText: theme.otpHidden,
    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
    decoration: decoration,
    onChanged: onChanged,
    autofillHints: const [AutofillHints.oneTimeCode],
  );
  return SizedBox(
    width: otpBoxSize.width,
    height: otpBoxSize.height,
    child: theme.inputUnderline ? field : decorateInput(field),
  );
}