Flutter Set circular progress indicator to false in TextFormField validator

Question

I have a login screen and in that screen there are two fields, 1 for the email and the other for the password. Both of these text fields have a validator, and the validation is if the text fields are null or empty. Below i have a submit button, my question is that how do i make the loading = false if the the text fields dont validate in this case if the text fields are null, or one of them.

global variable >>> bool loading = false;


TextFormField loginEmailTextField() {
    return TextFormField(
      enableInteractiveSelection: false,
      keyboardType: TextInputType.number,
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your phone number';
        }
        return null;
      },
      controller: emailController,
      onChanged: (value) {
        setState(() {});
      },
      decoration: InputDecoration(
        prefixIcon: const Icon(Icons.phone),
        suffixIcon: emailController.text.isEmpty
            ? const Text('')
            : GestureDetector(
                onTap: () {
                  emailController.clear();
                },
                child: const Icon(Icons.close),
              ),
        labelText: 'Phone',
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: const BorderSide(color: Colors.red, width: 1),
        ),
      ),
    );
  }

  TextFormField loginPasswordTextField() {
    return TextFormField(
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your password';
        }
        return null;
      },
      obscureText: isVisible,
      controller: passwordController,
      onChanged: (value) {
        print(value);
      },
      decoration: InputDecoration(
        prefixIcon: const Icon(Icons.lock),
        suffixIcon: GestureDetector(
          onTap: () {
            isVisible = !isVisible;
            setState(() {});
          },
          child: Icon(isVisible ? Icons.visibility : Icons.visibility_off),
        ),
        labelText: 'Password',
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: const BorderSide(color: Colors.red, width: 1),
        ),
      ),
    );
  }

  Column loginSubmitButton(double width, double height, BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: width / 2,
          height: height / 12,
          child: ElevatedButton(
            onPressed: () async {
              if (_formKey.currentState!.validate()) {
                Future<Response> futureResponse = fetchWorkingLocationData();
                futureResponse
                    .then((response) => {
                          if (response.statusCode == 200)
                            {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => MenuPage()),
                              )
                            }
                          else
                            {
                              setState(() {
                                loading = false;
                              }),
                              ScaffoldMessenger.of(context).showSnackBar(
                                const SnackBar(
                                  backgroundColor: Colors.blue,
                                  content: Text(
                                    "Incorrect phone number or password",
                                    style: TextStyle(fontSize: 18),
                                  ),
                                  duration: Duration(seconds: 4),
                                ),
                              ),
                            },
                        })
                    .catchError((error, stackTrace) => print('shush'));
              }
              if (loading) return;
              setState(() {
                loading = true;
              });
            },
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              child: loading
                  ? Loading()
                  : Text(
                      'Submit',
                      style: TextStyle(fontSize: 22, color: Colors.white),
                    ),
            ),
            style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.0),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Answer 1

First you press button, you will check credentials is blank/Null or not, if not then you forward next step, then loading variable you can true, and execute api process, after the response loading variable false.

Answer 2

Like this

Future<String> signIn() async {
    if (IDforlogin.text != '') {
      if (password.text != '') {
        setState(() {
          _isloading = true;
        });
        Map data = {
          'email': IDforlogin.text.trim(),
          'password': password.text.trim(),
          'fcm_token': fcm_token.toString()
        };
        print(data);
        var response = await http.post(API_URL + 'login', body: data);
        try {
          print(response.body);
          var decodedData = json.decode(response.body);
          print(decodedData['code']);
          if (decodedData['code'] == 200) {
            setState(() {
              _isloading = false;
            });
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => dashbord()),
            );
          } else {
            setState(() {
              _isloading = false;
            });
            Toast.show(decodedData['message'], context,
                duration: Toast.LENGTH_LONG, gravity: Toast.CENTER);
          }
        } catch (error) {
          setState(() {
            _isloading = false;
          });
          Toast.show(errormessage, context,
              duration: Toast.LENGTH_LONG,
              gravity: Toast
                  .CENTER); // executed for errors of all types other than Exception
        }
      } else {
        Toast.show('Please enter password', context,
            duration: Toast.LENGTH_LONG, gravity: Toast.CENTER);
      }
    } else {
      Toast.show('Please enter ID', context,
          duration: Toast.LENGTH_LONG, gravity: Toast.CENTER);
    }}

Answer 3

I found an answer that personally fit what i needed

TextFormField loginEmailTextField() {
    return TextFormField(
      enableInteractiveSelection: false,
      keyboardType: TextInputType.number,
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your phone number';
        }
        return null;
      },
      controller: emailController,
      onChanged: (value) {
        setState(() {});
      },
      decoration: InputDecoration(
        prefixIcon: const Icon(Icons.phone),
        suffixIcon: emailController.text.isEmpty
            ? const Text('')
            : GestureDetector(
                onTap: () {
                  emailController.clear();
                },
                child: const Icon(Icons.close),
              ),
        labelText: 'Phone',
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: const BorderSide(color: Colors.red, width: 1),
        ),
      ),
    );
  }

  TextFormField loginPasswordTextField() {
    return TextFormField(
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your password';
        }
        return null;
      },
      obscureText: isVisible,
      controller: passwordController,
      onChanged: (value) {
        print(value);
      },
      decoration: InputDecoration(
        prefixIcon: const Icon(Icons.lock),
        suffixIcon: GestureDetector(
          onTap: () {
            isVisible = !isVisible;
            setState(() {});
          },
          child: Icon(isVisible ? Icons.visibility : Icons.visibility_off),
        ),
        labelText: 'Password',
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: const BorderSide(color: Colors.red, width: 1),
        ),
      ),
    );
  }

  Column loginSubmitButton(double width, double height, BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: width / 2,
          height: height / 12,
          child: ElevatedButton(
            onPressed: () async {
              if (_formKey.currentState!.validate()) {
                setState(() {
                  loading = true;
                });
                Future<Response> futureResponse = fetchWorkingLocationData();
                futureResponse
                    .then((response) => {
                          if (response.statusCode == 200)
                            {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => MenuPage()),
                              )
                            }
                          else
                            {
                              setState(() {
                                try {
                                  loading = false;
                                } on Exception catch (e, s) {
                                  loading = true;
                                }
                              }),
                              ScaffoldMessenger.of(context).showSnackBar(
                                const SnackBar(
                                  backgroundColor: Colors.blue,
                                  content: Text(
                                    "Incorrect phone number or password",
                                    style: TextStyle(fontSize: 18),
                                  ),
                                  duration: Duration(seconds: 4),
                                ),
                              ),
                            },
                        })
                    .catchError((error, stackTrace) => print('shush'));
              }
            },
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              child: loading
                  ? Loading()
                  : Text(
                      'Submit',