How to dispose Timer Button in flutter? - flutter

Question

I have a timer button that waits for 30 seconds then be active, it is used to allow the user resend OTP verification code. there is also a "Verify" button that verifies the entered OTP and completes the authentication and then resets some variabe through setState.
problem is when I press the Verify button while the timer button is still counting, an error happens saying:
Unhandled Exception: setState() called after dispose():
_TimerButtonState#70c61(lifecycle state: defunct, not mounted)
E/flutter ( 3950): This error happens if you call setState() on a State object for a
widget that no longer appears in the widget tree (e.g., whose parent widget no longer
includes the widget in its build). This error can occur when code calls setState() from
a timer or an animation callback.
E/flutter ( 3950): The preferred solution is to cancel the timer or stop listening to
the animation in the dispose() callback. Another solution is to check the "mounted"
property of this object before calling setState() to ensure the object is still in the
tree.
by testing I can see it only happens if setState happens while the counter is still running. but can't find a way to make it stop counting prior to setstate.
Any Idea how can I solve this?
Timer Button
TimerButton(
buttonType: ButtonType.TextButton,
label: "Resend Code".tr,
timeOutInSeconds: 30,
onPressed: () async {
await sendOTP();
},
resetTimerOnPressed: false,
disabledColor: Colors.grey,
color: const Color.fromARGB(255, 245, 91, 165),
disabledTextStyle:
TextStyle(fontSize: 12.sp, color: Colors.white),
activeTextStyle: TextStyle(
fontSize: 13.sp,
color: Colors.white,
),
),
Verify Button:
SizedBox(
height: 35.h,
width: 220.w,
child: ElevatedButton(
onPressed: () async {
if (loading == true) {
} else {
final PhoneAuthCredential phoneAuthCredential =
PhoneAuthProvider.credential(
verificationId: verificationId,
smsCode: otpcontroller.text);
signInWithPhoneAuthCredential(phoneAuthCredential);
}
},
child: Container(
width: 220.w,
alignment: Alignment.center,
child: Text(
"Verify".tr,
style: GoogleFonts.lato(
fontStyle: FontStyle.normal,
color: Colors.white,
fontSize: 20.sp,
),
),
),
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: const Color.fromARGB(255, 245, 91, 165)),
),
Verification Function:
void signInWithPhoneAuthCredential(
PhoneAuthCredential phoneAuthCredential) async {
setState(() {
loading = true;
});
try {
// ignore: non_constant_identifier_names
final AuthCredential =
await _auth.signInWithCredential(phoneAuthCredential);
setState(() {
loading = false;
});
if (AuthCredential.user != null) {}
} on FirebaseAuthException catch (e) {
setState(() {
loading = false;
});
Flushbar(
message: e.message,
duration: const Duration(seconds: 4),
).show(context);
}
}

Answer 1

Didn't find good solution to this, instead I replaced the timer button with a normal TextButton and circular_countdown_timer plugin. and contollred the button become active/inactive using a bool that changes its value with when the timer finishes.