CircularProgressIndicator not showing when a button pressed

Question

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(),
                       ))),

Answer 1

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.

Answer 2

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());
                }
              ),
          )),
      ),