Flutter Circular Progress Indicator On Submit Button

Question

I have a Login screen and it has two text fields and a submit button, in this submit button, what im doing right now is that when its pressed it shows a loading icon and at some point it will navigate to the other screen, but if the usernames email and phone number is wrong i show a snackbar with and error message, the problem is that even when that happends the loading icon keeps loading and it never stops, what im want to do is that if everything is fine and the user can navigate to the other screen than show the loading icon and then the it will navigate to the other screen, and if the email or password are wrong in this case if response.statusCode is not equal to 200 i show the snackbar with the error message and i want loading icon to be false. same with if the text fields are empty, for now ive made a validator on my TextFormFields, so when the text fields are empty or response.statusCode != 200 loading = false

bool loading = true;

TextFormField loginEmailTextField() {
    return TextFormField(
      enableInteractiveSelection: false,
      keyboardType: TextInputType.number,
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your phone number';
        }
        return null;
      },

TextFormField loginPasswordTextField() {
    return TextFormField(
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your password';
        }
        return null;
      },

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
                            {
                              {
                                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',

Answer 1

I'm not sure if your isLoading is already outside (it seems so),but * isLoading boolean should be outside of your main widget build function, because whenever you call setState your boolean will be set to true again, also I would set it to false instead because you don't want it showing immediately on the login page

In your button function you should also call setState and set your isLoading value to whatever it should be when that if check is done

.then((response) => {
                          if (response.statusCode == 200)
                            {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => MenuPage()),
                              )
                            }
                          else
                            {
                              {
                                setState(){
                                isLoading = 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),
                                  ),
                                ),

                              }
                            },
                        })

Basically what you want to do is set the state of that boolean whenever it should be set to either true or false

This has to be done for every case that you have in your button (both for the icon and the loading indicator)