otpField method

Widget otpField({ required BuildContext context, required bool first, required bool last, required TextEditingController otpController, })

default otp fields to enter otp

Implementation

Widget otpField({
  required BuildContext context,
  required bool first,
  required bool last,
  required TextEditingController otpController,
}) {
  return Container(
    height: 55,
    width: 40,
    margin: EdgeInsets.only(left: first ? 0 : 5),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(6),
      boxShadow: [
        BoxShadow(color: Colors.black.withOpacity(0.2), blurRadius: 6),
      ],
    ),
    child: TextFormField(
      controller: otpController,
      autofocus: true,
      onChanged: (value) {
        if (value.length == 1 && last == false) {
          FocusScope.of(context).nextFocus();
        }
        if (value.isEmpty && first == false) {
          FocusScope.of(context).previousFocus();
        }
      },
      validator: (value) {
        if (value!.isEmpty) {
          return "";
        } else {
          return null;
        }
      },
      readOnly: false,
      textAlign: TextAlign.center,
      style: const TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
        color: Colors.black,
      ),
      keyboardType: TextInputType.number,
      maxLength: 1,
      cursorColor: Colors.black,
      decoration: InputDecoration(
        errorStyle: const TextStyle(
          fontSize: 0,
        ),
        contentPadding:
            const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
        filled: true,
        fillColor: primaryColor,
        floatingLabelBehavior: FloatingLabelBehavior.never,
        counter: const Offstage(),
        enabledBorder: OutlineInputBorder(
            borderSide:
                BorderSide(width: 1.5, color: Colors.black.withOpacity(0.5)),
            borderRadius: BorderRadius.circular(6)),
        focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(
              width: 1.5,
              color: Colors.black,
            ),
            borderRadius: BorderRadius.circular(6)),
        focusedErrorBorder: OutlineInputBorder(
            borderSide: const BorderSide(width: 1.5, color: Colors.black),
            borderRadius: BorderRadius.circular(6)),
        errorBorder: OutlineInputBorder(
            borderSide:
                BorderSide(width: 1.5, color: Colors.black.withOpacity(0.5)),
            borderRadius: BorderRadius.circular(6)),
      ),
    ),
  );
}