Flutter keyboard is flickering going throw next fields on OTP widget

Question

i have a weird behavior on my application i have built a custom OTP screen and when i test it the keyboard shows a weird behavior the system keyboard flicker when moving throw fields i have tried different solutions but nothing worked for me:

Note: i don't want to use external packages.

screen code:

build(BuildContext context) {
// AppBar height
final double appBarHeight = kToolbarHeight; // Default appBar height is 56.0
final double statusBarHeight = MediaQuery.of(context).padding.top;

return Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    elevation: 0.0,
  ),
  body: Container(
    width: double.infinity,
    height: double.infinity,
    decoration: BoxDecoration(
      gradient: ThemeController().themeGradient,
    ),
    child: Padding(
      padding: EdgeInsets.only(
        top: appBarHeight + statusBarHeight,
        left: 16.0,
        right: 16.0,
        bottom: 16.0,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'التحقق من الجوال',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24.0,
            ),
          ),
          Text(
            'تم إرسال رمز التحقق إلى رقم جوالك الرجاء تحقق من الرسائل',
            style: TextStyle(
              color: Colors.white70,
              fontSize: 16.0,
            ),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 32.0),
          Directionality(
            textDirection: TextDirection.ltr,
            child: Column(
              children: [
                // Pinput(
                //   length: 6,
                // ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    OTPFieldWidget(
                      controller: textEditingControllerOne,
                      first: true,
                    ),
                    OTPFieldWidget(
                      controller: textEditingControllerTwo,
                    ),
                    OTPFieldWidget(
                      controller: textEditingControllerThree,
                    ),
                    OTPFieldWidget(
                      controller: textEditingControllerFour,
                    ),
                    OTPFieldWidget(
                      controller: textEditingControllerFive,
                    ),
                    OTPFieldWidget(
                      controller: textEditingControllerSix,
                      last: true,
                    ),
                  ],
                ),
              ],
            ),
          ),
          const SizedBox(height: 48.0),
          CustomElevatedButton(
            onPressed: () => Get.offAllNamed(HomepageScreen.routeName),
            label: 'تحقق',
          ),
        ],
      ),
    ),
  ),
);

}

OTP widget code:

TextField(
  controller: controller,
  onTap: () {
    controller.selection =
        TextSelection.collapsed(offset: controller.text.length);
  },
  onChanged: (value) {
    if (value.isNotEmpty && !last) {
      FocusScope.of(context).nextFocus();
    }
    if (value.isEmpty && !first) FocusScope.of(context).previousFocus();
  },
  autofocus: autoFocus,
  textAlign: TextAlign.center,
  maxLength: 1,
  keyboardType: TextInputType.number,
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  style: TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.bold,
    fontSize: 24.0,
  ),
  cursorHeight: 32.0,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.symmetric(
      vertical: 8.0,
    ),
    counterText: '',
    constraints: BoxConstraints(
      maxWidth: 48.0,
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        color: Colors.white,
        width: 2.0,
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        width: 2,
        color: Colors.white70,
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        width: 2,
        color: Colors.white70,
      ),
    ),
    errorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        width: 2,
        color: Colors.white70,
      ),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: BorderSide(
        width: 2,
        color: Colors.white70,
      ),
    ),
  ),
);

Thanks for your time, happy coding for you all.