How to stop circularprocessindicator on wrong input registration?

Issue

I'm struggling with a problem on a registration page. The user can input the fields name, email and password( [1]: https://i.stack.imgur.com/FzhuR.png) If done correctly, an account is being made and user goes to the landing page. The time he waits will be indicated by an circularprocessindicator ( [1]: https://i.stack.imgur.com/9wjfC.png).

Problem is that when a user fills in something wrong and presses registration button, the processindicator starts en keeps running. The registration button is gone and there is no way to go forward. My question is how do I stop the processindicator when an error in one of the field occur?

Any help would be greatly appriciated.

This is the code:

    class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final _registerFormKey = GlobalKey<FormState>();

  final _nameTextController = TextEditingController();
  final _emailTextController = TextEditingController();
  final _passwordTextController = TextEditingController();

  final _focusName = FocusNode();
  final _focusEmail = FocusNode();
  final _focusPassword = FocusNode();

  bool _isProcessing = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _focusName.unfocus();
        _focusEmail.unfocus();
        _focusPassword.unfocus();
      },
      child: Scaffold(
        appBar: AppBar(
          iconTheme: IconThemeData(color: Color.fromRGBO(132, 76, 130, 1)),
          title: Text('Registreren',
              style: TextStyle(color: Color.fromRGBO(132, 76, 130, 1))),
          centerTitle: true,
          backgroundColor: Color.fromRGBO(250, 202, 48, 1),
        ),
        body: Center(
    child: SingleChildScrollView(
    reverse: true,
    padding: EdgeInsets.all(32),
    child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 120.0,
                  width: 120.0,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(
                          'assets/images/logo.jpg'),
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
                SizedBox(height: 24.0),
                Form(
                  key: _registerFormKey,
                  child: Column(
                    children: <Widget>[
                      TextFormField(
                        controller: _nameTextController,
                        focusNode: _focusName,
                        validator: (value) => Validator.validateName(
                          name: value,
                        ),
                    decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color:Color.fromRGBO(132, 76, 130, 1))),
                      hintText: "Naam ouder",
                      hintStyle: TextStyle(color: Color.fromRGBO(132, 76, 130, 1)),
                      focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Color.fromRGBO(250, 202, 48, 1))),
                          errorBorder: UnderlineInputBorder(
                            borderRadius: BorderRadius.circular(6.0),
                            borderSide: BorderSide(
                              color: Colors.red,
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 16.0),
                      TextFormField(
                        controller: _emailTextController,
                        focusNode: _focusEmail,
                        validator: (value) => Validator.validateEmail(
                          email: value,
                        ),
                        decoration: InputDecoration(
                          enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color:Color.fromRGBO(132, 76, 130, 1))),
                          hintText: "Email adres",
                          hintStyle: TextStyle(color: Color.fromRGBO(132, 76, 130, 1)),
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Color.fromRGBO(250, 202, 48, 1))),
                          errorBorder: UnderlineInputBorder(
                            borderRadius: BorderRadius.circular(6.0),
                            borderSide: BorderSide(
                              color: Colors.red,
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 16.0),
                      TextFormField(
                        controller: _passwordTextController,
                        focusNode: _focusPassword,
                        obscureText: true,
                        validator: (value) => Validator.validatePassword(
                          password: value,
                        ),
                        decoration: InputDecoration(
                          enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color:Color.fromRGBO(132, 76, 130, 1))),
                          hintText: "Wachtwoord",
                          hintStyle: TextStyle(color: Color.fromRGBO(132, 76, 130, 1)),
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Color.fromRGBO(250, 202, 48, 1))),
                          errorBorder: UnderlineInputBorder(
                            borderRadius: BorderRadius.circular(6.0),
                            borderSide: BorderSide(
                              color: Colors.red,
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 32.0),
                      _isProcessing
                          ? CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation<Color>(Color.fromRGBO(250, 202, 48, 1)),
                                              )
                          : Row(
                        children: [
                          Expanded(
                            child: ElevatedButton(
                              onPressed: () async {
                                setState(() {
                                  _isProcessing = true;
                                });

                                if (_registerFormKey.currentState!
                                    .validate()) {
                                  User? user = await FireAuth
                                      .registerUsingEmailPassword(
                                    name: _nameTextController.text,
                                    email: _emailTextController.text,
                                    password:
                                    _passwordTextController.text,
                                  );

                                  setState(() {
                                    _isProcessing = false;
                                  });

                                  if (user != null) {
                                    Navigator.of(context)
                                        .pushAndRemoveUntil(
                                      MaterialPageRoute(
                                        builder: (context) =>
                                            ProfilePage(user: user),
                                      ),
                                      ModalRoute.withName('/'),
                                    );
                                  }
                                }
                              },
                              child: Text(
                                'Registreren',
                                style: TextStyle(color: Color.fromRGBO(132, 76, 130, 1)),
                              ),
                                style: ButtonStyle(
                                backgroundColor: MaterialStateProperty.all(Color.fromRGBO(250, 202, 48, 1)),
                                ),
                              ),
                            ),
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    ),
    ),
    );
  }
}

Solution

You can try this

if (_registerFormKey.currentState!.validate()) {
    User? user = await FireAuth.registerUsingEmailPassword(
                       name: _nameTextController.text,
                       email: _emailTextController.text,
                       password:_passwordTextController.text,);

    setState(() {
        isProcessing = false;
    });

    if (user != null) {
        Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(builder: (context) =>
                ProfilePage(user: user)),ModalRoute.withName('/'),);
        }
} /// add code in this line
  /// if use input wrong
  /// update UI to show the button again
else {
    setState(() {
        isProcessing = false;
    });
}

Answered By - Sam Chan