showing CircularProgressIndicator until the function end

I want to show CircularProgressIndicator until the function end, So I use this method,

set bool isLoading = false;

and this is the function,

verifyPhoneNumber(String input) async {
  setState(() {
    isLoading = true;
  });
  await AuthMethods().phoneSign(context, input);
  setState(() {
    isLoading = false;
  });}

For this screen

              Scaffold(
                      body:  
                      isLoading
                          ? Center(
                              child: CircularProgressIndicator(color: darkblueColor),
                            )
                          : Column(
                              children: [ 
                               IntlPhoneField(
                                    onChanged: (phone) {
                                      setState(() {
                                        fullNumber = phone.completeNumber;
                                      });
                                    },
                                  ),
                               CustomButton(
                                    onTap: () {
                                          verifyPhoneNumber(fullNumber);
                                    },
                                    text: "Next",
                                    height: 50,
                                  ),],),)

This is not working!. Can futureBuilderapply for this & If it's yes, How?

this function work for firebase phoneAuth, There is phoneSign inside AuthMethods class.

CodePudding user response：

For question snippet , you need to await for verifyPhoneNumber

Future<void> verifyPhoneNumber(String input) async {
  setState(() {
    isLoading = true;
  });
  await AuthMethods().phoneSign(context, input);
  setState(() {
    isLoading = false;
  });}

Make the async method

CustomButton(
   onTap: ()async {
         await verifyPhoneNumber(fullNumber); // you need to await for future

CodePudding user response：

Follow the docs, you already answered your Q. Also I am not sure what is your process but StreamBuilder also could be an option.

You make a call

Future _checkVerifyPhoneNumber() async {
  try {
    bool res = await AuthMethods().phoneSign(context, input);
    return res;
  } catch (e) {
    print(e);
  }
}

Then you do as the docs say and do something like this

Scaffold(
      body: FutureBuilder(
          future: checkVerifyPhoneNumber(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Column(
                       children: [ 
                         IntlPhoneField(
                          onChanged: (phone) {
                          setState(() {
                           fullNumber = phone.completeNumber;
                                      });
                                    },
                                  ),
                            CustomButton(
                                    onTap: () {
                                          verifyPhoneNumber(fullNumber);
                                    },
                                    text: "Next",
                                    height: 50,
                                  ),],),)
                             }
                              else if (snapshot.hasError) {
                              const Icon(
                                Icons.error_outline,
                                color: Colors.red,
                                size: 60,
                               );
                          } else {
                              SizedBox(
                               width: 60,
                               height: 60,
                               child: CircularProgressIndicator(),
                           ),
                         }
                     }),
                  );