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

Issue

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

Solution

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

Answered By – Raja Ehtisham

Answer Checked By – David Marino (FlutterFixes Volunteer)