如何在以下代码中的 "onPressed" 上添加循环进度指示器？

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

以下是loginUser()函数的代码

loginUser() {
final form = _formKey.currentState;

if (form!.validate()) {

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

}

我想在整个屏幕上显示圆形进度条，直到在按下登录按钮时加载数据

Answer 1

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

如何在以下代码中的 "onPressed" 上添加循环进度指示器？

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

future

async-await

flutter

dart-null-safety