Solved: Unable to type text in text pin field(sms_autofill: ^2.2.0)

Question

Asked by Deval J on January 06, 2022 (source).

unable to type OTP CODE in text pin field (sms_autofill: ^2.2.0) when the timer is on, I can write after the timer is off, debug log show "view is not EditText"

I declared int to set time

Timer? _timer;
int _start = 60;

Method to call timer, this timer is called when otp send successfully.

  void startTimer() {
    const oneSec = const Duration(seconds: 1);
    _timer = new Timer.periodic(
      oneSec,
      (Timer timer) {
        if (_start == 0) {
          setState(() {
            timer.cancel();
          });
        } else {
          setState(() {
            _start--;
          });
        }
      },
    );
  }

Otp Field to enter otp

PinFieldAutoFill(
   codeLength: 6,
   decoration: const UnderlineDecoration(
   bgColorBuilder: FixedColorBuilder(Colors.white),
   textStyle: TextStyle(
   fontSize: 22,
   color: Colors.black,
   fontWeight: FontWeight.bold),
   colorBuilder: FixedColorBuilder(Colors.white),),
                currentCode: _code,
                onCodeSubmitted: (code) {
                  setState(() {
                    _code = code;
                  });
                  if (code.length == 6) {
                    setState(() {
                      isLoading2 = true;
                    });
                    handleSignIn();
                  } else {
                    Fluttertoast.showToast(
                        msg: 'Enter Correct Code',
                        backgroundColor: Colors.black.withOpacity(0.95),
                        textColor: Colors.white);
                  }
                },
                onCodeChanged: (code) {
                  if (code!.length == 6) {
                    FocusScope.of(this.context).requestFocus(FocusNode());
                    setState(() {
                      _code = code;
                    });
                  }
                },
              ),

This video describes my issue

Answer

Question answered by Diwyansh (source).

Actually the problem is in your void startTimer() function when you call it first time it initiates a Timer.periodic function where you are calling setState in every second. So any change in your screen will not reflect because set state is setting it again to default value every second.

Video Answers on YouTube

AUTOFILL COUNTDOWN DART FLUTTER TIMER
SHARE: