How to match password and confirm password in Flutter?

Question

I just learned Flutter. Here I want to ask how to match passwords and confirm passwords. Here I will give my code. I also use TextField. and I don't use a validator here to validate

                TextField(
                key: passkey,
                style: new TextStyle(color: Colors.white),
                controller: password,
                decoration: InputDecoration(
                  labelText: 'Password',
                  labelStyle: TextStyle(color: Colors.white),
                  hintStyle: TextStyle(color: Colors.white),
                  icon: const Padding(
                      padding: const EdgeInsets.only(top: 15.0),
                      child: const Icon(
                        Icons.lock_outline,
                        color: Colors.white,
                      )
                      ),
                  errorText: validate ? 'Password Can\'t Be Empty' : null,
                ),
                obscureText: _obscureText,

              ),
              TextField(
                style: new TextStyle(color: Colors.white),
                controller: confirmpassword,
                decoration: InputDecoration(
                  labelText: 'Retype Password',
                  labelStyle: TextStyle(color: Colors.white),
                  hintStyle: TextStyle(color: Colors.white),
                  icon: const Padding(
                      padding: const EdgeInsets.only(top: 15.0),
                      child: const Icon(
                        Icons.lock_outline,
                        color: Colors.white,
                      )),
                  // errorText:
                  // validate ? 'Password Can\'t Be Empty' : null,
                ),
                obscureText: _obscureText,
              ),

Answer 1

Use TextFormField widget which consists of a builtin validator

  // Form
  final GlobalKey<FormState> _form = GlobalKey<FormState>();
  final TextEditingController _pass = TextEditingController();
  final TextEditingController _confirmPass = TextEditingController();

  Form(
        key: _form,
        child: ListView(
              children: <Widget>[
                     TextFormField(
                           controller: _pass,
                           validator: (val){
                              if(val.isEmpty)
                                   return 'Empty';
                              return null;
                              }
                     ),
                      TextFormField(
                           controller: _confirmPass,
                           validator: (val){
                              if(val.isEmpty)
                                   return 'Empty';
                              if(val != _pass.text)
                                   return 'Not Match'
                              return null;
                              }
                     ),
                       ]
              )
    )


    // To validate call
    _form.currentState.validate()

Answer 2

Just simply declare a variable first then assign it's value to the value which we are using.

Then compare it down as shown below:

GlobalKey<FormState> _formKey = GlobalKey<FormState>();
      var confirmPass;
    TextFormField(
                                validator: (String value) {
                                  confirmPass = value;
                                  if (value.isEmpty) {
                                    return "Please Enter New Password";
                                  } else if (value.length < 8) {
                                    return "Password must be atleast 8 characters long";
                                  } else {
                                    return null;
                                  }
                                },
                                decoration: InputDecoration(
                                  hintText: "Enter New Password",
                                  hintStyle: TextStyle(color: Colors.grey),
                                  border: new OutlineInputBorder(
                                    borderRadius: const BorderRadius.all(
                                      const Radius.circular(40.0),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            SizedBox(height: 20),
                            Container(
                              child: TextFormField(
                                validator: (String value) {
                                  if (value.isEmpty) {
                                    return "Please Re-Enter New Password";
                                  } else if (value.length < 8) {
                                    return "Password must be atleast 8 characters long";
                                  } else if (value != confirmPass) {
                                    return "Password must be same as above";
                                  } else {
                                    return null;
                                  }
                                },
                                decoration: InputDecoration(
                                  hintText: "Re-Enter New Password",
                                  hintStyle: TextStyle(color: Colors.grey),
                                  border: new OutlineInputBorder(
                                    borderRadius: const BorderRadius.all(
                                      const Radius.circular(40.0),
                                    ),
                                  ),
                                ),
                              ),
                            ),

Answer 3

I did a validation using RxDart and Streams. Although it is a little bit more work I guarantee that the final results improve the performance and also the UX. Check it out on medium

Here is the git hub project