How can i add circular progress indicator on "onPressed" in the follwing code?

Question

child: RaisedButton(
                    color: AppColors.darkGreenColor,
                    onPressed: () async{
                      passwordController.text == '' ||concatePhoneNumber == '' ? Get.snackbar("Please Enter Mobile or Password", '',colorText: Colors.white,backgroundColor: AppColors.darkGreenColor):
                      loginUser();
                    },
                    child: Text(AppString.login,
                      style:AppTextStyles.appTextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white
                     )
                    ),
                  ),

Following is the code for loginUser() function

loginUser() {
final form = _formKey.currentState;

if (form!.validate()) {

  form.save();
  var jsonData = {
    "phone_number": concatePhoneNumber,
    "password": passwordController.text,
  };
  loginController.loginUser(jsonData);
}

}

I want to show circular progress bar on whole screen until data is loaded while pressing login button

**I want to** is not a question. It just informs us that you want us to do the heavy lifting for you. Where are you stuck? What have you researched? What have you tried? To be clear, we'll help you at stackoverflow but we're not a free do-my-thinking service See [how to ask](https://stackoverflow.com/help/how-to-ask) and [Minimal, Complete and Verifiable Example](http://stackoverflow.com/help/mcve) — RiggsFolly, Jan 10 '22 at 12:31
@RiggsFolly I am trying to add "if" condition in which conditions check that if data is not loaded yet show circular progress indicator else do the 'form.validate' portion of it. and I'm new here, so please help me if you can in code. — Ali Punjabi, Jan 10 '22 at 12:42

score 3 · Accepted Answer · answered Jan 14 '22 at 06:09

Here is a solution, use setState to implement circular progress bar


bool isloading=false;
child: !isloading ? RaisedButton(
                    color: AppColors.darkGreenColor,
                    onPressed: () async{
                     
                      if(passwordController.text == '' ||phoneNumber.text == '')
                      {Get.snackbar("Please Enter Mobile or Password", '',colorText: Colors.white,backgroundColor: AppColors.darkGreenColor);
                      
                      }
                      if(_formKey.currentState!.validate() && passwordController.text!=''){
                      _formKey.currentState!.save();
                      
                        
                        
                           setState(() {
                        
                        isloading=true;
                        
                      });
                      
                      
                      await loginUser();
                       
                      
                
                      setState(() {
                        
                        isloading=false;
                        isloading=!isloading;
                      });
                      

                      
                      }
                    },
                    child: Text(AppString.login,
                      style:AppTextStyles.appTextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white
                     )
                    ),
                  ): Center(child: CircularProgressIndicator())
                ),

How can i add circular progress indicator on "onPressed" in the follwing code?

1 Answers1