Show a loading spinner when sending OTP using Firebase - flutter

Question

I want to show a loading spinner whenever user clicks on "SEND OTP" button. I have created a variable _IsLoading which I am setting to true just prior to calling the verifyphone function and then setting it to false afterwards. It seems like it does not have any effect whatsoever on the UI. How can I make this work?
If I replace the verifyPhone with the following line of code, then I do see the spinner :
await new Future.delayed(new Duration(milliseconds: 1500));
I have disabled recaptcha, so my app does not navigate to the recaptcha verification page. But still the spinner does not work.
#override
Widget build(BuildContext context) {
return _isLoading
? Center(child: Loading()):Scaffold(
appBar: AppBar(
title: Text("OTP Verification"),
),
body:SizedBox(
width: double.infinity,
child: Padding(
padding:
EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(20)),
child: SingleChildScrollView(
child: Column(
children: [
SizedBox(height: SizeConfig.screenHeight * 0.05),
Text(
"OTP Verification",
style: headingStyle,
),
Text("Press Send OTP to get a 6 digit code via SMS and enter below.."),
// buildTimer(),
//OtpForm(),
Form(
child: Column(
children: [
SizedBox(height: SizeConfig.screenHeight * 0.15),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: getProportionateScreenWidth(40),
child: TextFormField(
autofocus: true,
maxLength: 1,
obscureText: true,
style: TextStyle(fontSize: 24),
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: otpInputDecoration,
onChanged: (value) {
nextField(value, pin2FocusNode);
},
),
),
SizedBox(
width: getProportionateScreenWidth(40),
child: TextFormField(
focusNode: pin2FocusNode,
maxLength: 1,
obscureText: true,
style: TextStyle(fontSize: 24),
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: otpInputDecoration,
onChanged: (value) => nextField(value, pin3FocusNode),
),
),
SizedBox(
width: getProportionateScreenWidth(40),
child: TextFormField(
focusNode: pin3FocusNode,
maxLength: 1,
obscureText: true,
style: TextStyle(fontSize: 24),
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: otpInputDecoration,
onChanged: (value) => nextField(value, pin4FocusNode),
),
),
SizedBox(
width: getProportionateScreenWidth(40),
child: TextFormField(
maxLength: 1,
focusNode: pin4FocusNode,
obscureText: true,
style: TextStyle(fontSize: 24),
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: otpInputDecoration,
onChanged: (value) => nextField(value, pin5FocusNode),
),
),
SizedBox(
width: getProportionateScreenWidth(40),
child: TextFormField(
autofocus: true,
focusNode: pin5FocusNode,
obscureText: true,
maxLength: 1,
style: TextStyle(fontSize: 24),
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: otpInputDecoration,
onChanged: (value) {
nextField(value, pin6FocusNode);
},
),
),
SizedBox(
width: getProportionateScreenWidth(40),
child: TextFormField(
autofocus: true,
focusNode: pin6FocusNode,
maxLength: 1,
obscureText: true,
style: TextStyle(fontSize: 24),
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: otpInputDecoration,
onChanged: (value) {
if (value.length == 1) {
pin6FocusNode.unfocus();
// Then you need to check is the code is correct or not
}
}
),
),
],
),
SizedBox(height: SizeConfig.screenHeight * 0.15),
DefaultButton(
text: _isLoading?"Sending OTP...":"Send OTP",
press: () async {
setState(() {
_isLoading = true;
});
verifyPhoneNumber();
setState(() {
_isLoading = false;
});
},
),
SizedBox(),
DefaultButton(
text: "Continue",
press: () async {
},
)
],
),
),
SizedBox(height: SizeConfig.screenHeight * 0.1),
GestureDetector(
onTap: () {
// OTP code resend
},
child: Text(
"Resend OTP Code",
style: TextStyle(decoration: TextDecoration.underline),
),
)
],
),
),
),
));
}

Answer 1

I found a solution. You can register a callback in the verifyPhoneNumber function by using then
Right before calling verifyPhoneNumber function, add this:
setState(() {
_isLoading = true;
});
Then in the function's call back, add change _isLoading to false.
await _auth.verifyPhoneNumber(
phoneNumber: '[phone]',
timeout: const Duration(seconds: 5),
verificationCompleted: verificationCompleted,
verificationFailed: verificationFailed,
codeSent: codeSent,
codeAutoRetrievalTimeout:
codeAutoRetrievalTimeout).then((value) {
setState(() {
_isLoading = false;
});
});