0

I'm trying to implement a button that when the user press the button the user will login throw firebase and the button should show Circular Progress Indicator while firebase logging complete. for some reason the Progress Indicator now showing.

I tried to replace

await SignUpController.instance.registerUser(number);

with

await Future.delayed(Duration(seconds: 2));

and that shows the Circular Progress Indicator.

Rx<bool> isLoading = false.obs;
///...
SizedBox(
                   height: 40,
                   width: double.infinity,
                   child: ElevatedButton(
                       onPressed: () async {
                         isLoading.value = true;
                         await SignUpController.instance.registerUser(number);
                         isLoading.value = false;
                       },
                       child: Obx(
                         () => !isLoading.value
                             ? Text(
                                 "Continue",
                                 style: TextStyle(
                                     fontSize: 20,
                                     fontWeight: FontWeight.normal),
                               )
                             : CircularProgressIndicator(),
                       ))),
Abrahem Gh
  • 47
  • 1
  • 2
  • 9

2 Answers2

0

It's likely that the call to SignUpController.instance.registerUser is happening so fast that you do not see the state being changed. Or there could be something wrong with your registerUser method.

  • Future registerUser(PhoneNumber phoneNumber) async { await AuthenticationRepository.instance.registerUser(phoneNumber); } Future registerUser(PhoneNumber phoneNumber) async { this.phoneNumber = phoneNumber; await _auth.verifyPhoneNumber( timeout: const Duration(seconds: 60), phoneNumber: phoneNumber.phoneNumber!, verificationCompleted: _verificationCompleted, verificationFailed: _verificationFailed, codeSent: _codeSent, codeAutoRetrievalTimeout: _codeAutoRetrievalTimeout, ); } – Abrahem Gh Jul 28 '23 at 06:48
  • here is my code for registerUser if u can help plz – Abrahem Gh Jul 28 '23 at 06:49
  • When you call the `registerUser` function, are you getting the verification code to the entered phone number? Just asking to make sure if the function is indeed working properly – Tuguldur Chinzorig Jul 28 '23 at 06:53
  • no im just sending a request to firebase to send the user code. if every think ok in firebase the OTP code will be send to user – Abrahem Gh Jul 28 '23 at 06:58
  • Yes. I understand that. I see that in your original code's `onPressed` function, you're calling the `registerUser` function. I'm just asking if you're receiving the OTP when you call the function. If you failed to configure Firebase properly, the function might be failing which could make the Future resolve instantly, and that's why you're not seeing the loading indicator. – Tuguldur Chinzorig Jul 28 '23 at 07:02
  • oh yes yes im geting OTP after a while from firebase, every think work fine for firebase. – Abrahem Gh Jul 28 '23 at 07:05
  • Alright. You should try adding an artificial delay inside your `registerUser` function (i.e `Future.delayed(Duration(seconds: 5))` and see if the progress indicator appears. – Tuguldur Chinzorig Jul 28 '23 at 07:08
  • i did that see my post. and that shows the indicator. – Abrahem Gh Jul 28 '23 at 07:15
  • I'm so thankful for u, that right the registerUser so fast. – Abrahem Gh Jul 28 '23 at 07:19
  • I meant add the delay *inside* the `registerUser` function, not replace it in the `onPressed` callback – Tuguldur Chinzorig Jul 28 '23 at 07:19
0
Center(
        child: Container(
          height: 40,
          color: Colors.black54,
          width: double.infinity,
          child: InkWell(
              onTap: () async {
                isLoading.toggle();
              },
              child:StreamBuilder(
                stream: isLoading.stream,
                builder: (context, snapshot) {
                  return isLoading.value == true
                      ? const Center(
                        child: Text(
                    "Continue",
                    style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.normal),
                  ),
                      )
                      : const Center(child: CircularProgressIndicator());
                }
              ),
          )),
      ),
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 18 '23 at 07:23