Flutter PIN Verification Countdown - flutter

Question

I made a pin verification with countdown using the timer_count_down package. What I'm trying to do is when the countdown is finished, it shows a text saying "Resend PIN" to resend the PIN to email and starts the countdown again.
Here is my Login.dart code snippet when I enter my email address it sends a PIN code to my email :
...
Form(
key: _formKey,
child: TextFormField(
cursorColor: Color(0xFF2481CF),
autofocus: true,
validator: (value) {
if (value == null || value.isEmpty || !EmailValidator.validate(value.trim())) {
return 'Email is not valid!';
}
return null;
},
controller: _controller,
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF2481CF)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF2481CF)),
),
labelText: 'Enter your email :',
labelStyle: TextStyle(
color: Color(0xFF2481CF)
)
),
style: TextStyle(
fontSize: 19.0,
height: 1.3,
),
),
),
...
floatingActionButton: FloatingActionButton(
// onPressed: _submit,
onPressed: () {
if (_formKey.currentState!.validate()) {
showDialog<String>(
context: context,
builder: (BuildContext context) => AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(height: 20,),
Text('PIN code will be sent to'),
SizedBox(height: 10,),
Text(_controller.text,
style: TextStyle(
fontWeight: FontWeight.bold
),),
SizedBox(
height: 30,
),
Text('Is this OK or would you like to edit the email address?'),
],
),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Edit',
style: TextStyle(
color: Color(0xFF2481CF)
),),
),
TextButton(
onPressed: () {
//kirim email
sendEmail(_controller.text.trim());
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => PinVerification(_controller.text.trim())),
);
},
child: const Text('Verify',
style: TextStyle(
color: Color(0xFF2481CF)
),),
),
],
),
);
};
},
child: const Icon(Icons.send),
),
And for the PinVerification.dart :
Widget onlySelectedBorderPinPut() {
final BoxDecoration pinPutDecoration = BoxDecoration(
color: const Color.fromRGBO(235, 236, 237, 1),
borderRadius: BorderRadius.circular(5.0),
);
return Form(
key: _formKey,
child: Column(
children: [
SizedBox(
height: 50,
),
Text(
'Enter 6 digit code we sent to your email.',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey),
),
SizedBox(
height: 30,
),
GestureDetector(
onLongPress: () {
print(_formKey.currentState?.validate());
},
child: PinPut(
validator: (s) {
if (s != null && s.contains('1')) return null;
return 'NOT VALID';
},
useNativeKeyboard: true,
autovalidateMode: AutovalidateMode.always,
withCursor: true,
fieldsCount: 6,
fieldsAlignment: MainAxisAlignment.spaceAround,
textStyle: const TextStyle(fontSize: 25.0, color: Colors.black),
eachFieldMargin: EdgeInsets.all(0),
eachFieldWidth: 45.0,
eachFieldHeight: 55.0,
onSubmit: (String pin) => postRequest(pin),
focusNode: _pinPutFocusNode,
controller: _pinPutController,
submittedFieldDecoration: pinPutDecoration,
selectedFieldDecoration: pinPutDecoration.copyWith(
color: Colors.white,
border: Border.all(
width: 2,
color: const Color.fromRGBO(160, 215, 220, 1),
),
),
followingFieldDecoration: pinPutDecoration,
pinAnimationType: PinAnimationType.scale,
),
),
SizedBox(
height: 20,
),
Countdown(
seconds: 20,
build: (_, double time) =>
RichText(
text: TextSpan(
text: 'Send PIN again in ',
style: TextStyle(
color: Theme.of(context).inputDecorationTheme.labelStyle?.color
),
children: <TextSpan>[
TextSpan(
text: time.toString(),
style: TextStyle(
color: Color(0xFF2481CF),
fontWeight: FontWeight.bold
)),
TextSpan(text: ' sec',
style: TextStyle(
color: Theme.of(context).inputDecorationTheme.labelStyle?.color
))
]
),
),
onFinished: () {
},
),
],
),
);
}
This is the screenshot for my PinVerification.dart:
Any solutions?

Answer 1

Created custom timer It worked for me
late Timer _timer;
int _start = 60;
void startTimer() {
const oneSec = const Duration(seconds: 1);
_timer = new Timer.periodic(
oneSec,
(Timer timer) {
if (_start == 0) {
setState(() {
timer.cancel();
});
} else {
setState(() {
_start--;
});
}
},
);
}
#override
void initState() {
super.initState();
startTimer();
}
#override
void dispose() {
super.dispose();
_timer.cancel();
errorController!.close();
}
And inside widget check condition as follows:
_start != 0
? Row(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Resend Code in",
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontWeight: FontWeight.bold,
fontSize: 16),
),
const SizedBox(width: 10),
Text(
_start.toString(),
style: TextStyle(
color: MyTheme.yellow,
fontWeight: FontWeight.bold,
fontSize: 20),
),
],
)
: YourWidget() // your widget here
When the Resend Otp is clikced reset the timer is as follows:
setState(() {
_start = 60;
startTimer();
});