Flutter: TextFields previous focus issue

Question

Here i have the row of textfields for the arrangement of the OTP Verification fields, and all works good excepts this thing,

Let's say i've 6 fields on that i've entered text on 3 fields now i'm on the 4th field i don't want to enter the text on that i need to go back to 3rd field by press erase button on the keyboard without tap on the previous field, help me out to fix this issue.

And also once i entered text on all the fields and i need to return back from tapping on one particular field means it does't

class VerificationTextFields extends StatelessWidget {
  final TextEditingController controller;
  final int index;
  final bool isOTPVerificationScreen;
  final Function(bool) callback;

  ///
  final AppColors appColors = injector<AppColors>();

  VerificationTextFields(
    this.controller,
    this.index,
    this.callback, {
    this.isOTPVerificationScreen = false,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 48,
      width: isOTPVerificationScreen ? 38 : 48,
      child: TextField(
        autofocus: false,
        textAlign: TextAlign.center,
        textAlignVertical: TextAlignVertical.bottom,
        keyboardType: TextInputType.number,
        controller: controller,
        maxLength: 1,
        cursorColor: appColors.blackVariant,
        style: Theme.of(context).textTheme.titleLarge,
        decoration: InputDecoration(
          filled: false,
          counterText: '',
          enabledBorder: Theme.of(context)
              .inputDecorationTheme
              .enabledBorder
              ?.copyWith(
                  borderSide:
                      BorderSide(width: 1.5, color: appColors.grayVariant)),
          focusedBorder: Theme.of(context)
              .inputDecorationTheme
              .enabledBorder
              ?.copyWith(
                  borderSide:
                      BorderSide(width: 1.5, color: appColors.blackVariant)),
        ),
        onChanged: (value) {
          if (value.isNotEmpty) {
            if (index <= 4) {
              FocusScope.of(context).nextFocus();
            } else {
              FocusScope.of(context).unfocus();
              callback(true);
            }
          } else if (value.isEmpty || controller.text.isEmpty) {
            if (index > 0) {
              FocusScope.of(context).previousFocus();
            } else {
              FocusScope.of(context).unfocus();
              callback(false);
            }
          }
        },
      ),
    );
  }
}

Answer 1

You can insert this code into your TextField widget, along with the onChanged callback. This change will allow moving back to the previous field when the erase button is pressed on an empty field, except for the first field.

onEditingComplete: () {
  if (controller.text.isEmpty && index > 0) {
    FocusScope.of(context).previousFocus();
  }
},