how to add button clicked Indicator to my Login button-CodePudding

I'm creating a login page using flutter. when user click login button user didn't realize did they click the button or not. how to add an indicator for button click "Login" in my code. appreciate your help on this.

  class _LoginFormState extends State<LoginForm> {
      final _formKey = GlobalKey<FormState>();
      String email = "";
      String password = "";
    
      Future LoginData() async {
        try {
          var response = await Dio().post(BASE_API 'user/Login',
              data: {"email": email, "password": password});
    
          if (response.data["message"] == "logged in successfully") {
            Get.snackbar("success", "logged in successfully");
            Get.to(HomeScreen());
    
          } else {
            Get.snackbar(
              "error",
              "No User Found",
              // backgroundColor: heartRed.withOpacity(0.8),
              // colorText: textWhite,
            );
          }
          print("res: $response");
        } catch (e) {
          Get.snackbar("Error", "Something went wrong.Please contact admin",
              backgroundColor: textWhite.withOpacity(0.5),
              borderWidth: 1,
              borderColor: textGrey,
              colorText: textGrey,
              icon: Icon(
                Icons.error_outline_outlined,
                color: heartRed,
                size: 30,
              ));
          print(e);
        }
  }

Container(
                      padding: const EdgeInsets.all(20.0),
                      child: GestureDetector(
                        child: ButtonM("Login"),
                        onTap: () async {
                          if (_formKey.currentState!.validate()){
                            LoginData();
                          }
                        },
                      ),
                    )

CodePudding user response：

You can use a container and GestureDetector(child: YourTextWidget()). It have a sligh pressed animation in it. And you can use Package flutter_easyloading to show loading icon. EasyLoading.show(status: "Loading"); and to stop EasyLoading.dismiss(); and to show result EasyLoading.showSuccess("Logged In Successfull!");.

CodePudding user response：

GestureDetector(
                        onTap: () {
                          Login();
                        },
                        child: Text('Log In'),
                      ),

and in login function we can use

login(){
    EasyLoading.show(status: "Loading...");
///perform anything you want here.
///and
///show this when you have success
EasyLoading.showSuccess("Logged In Successfully!");
///or this when you dont have success
        EasyLoading.showError("Something went wrong");
///and dismiss at last
EasyLoading.dismiss();