Flutter show error when Password not match

Question

I want to validate the passwords. The Widget _buildRepeatPasswordTF, has a TextFormField that validates if the value is not equal to the controller from _buildPasswordTF().

Widget _buildPasswordTF() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: < Widget > [
        Container(
          alignment: Alignment.centerLeft,
          decoration: kBoxDecorationStyle,
          height: 60.0,
          child: TextField(
            controller: _passwordController,
            obscureText: true,
            style: TextStyle(
              color: Color.fromRGBO(0, 128, 128, 1),
              fontFamily: 'OpenSans',
            ),
            decoration: InputDecoration(
              border: InputBorder.none,
              contentPadding: EdgeInsets.only(top: 14.0),
              prefixIcon: Icon(
                Icons.lock,
                color: Color.fromRGBO(0, 128, 128, 1),
              ),
              hintText: 'Password',
              hintStyle: kHintTextStyle,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildRepeatPasswordTF() {
     return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
         Container(
          alignment: Alignment.centerLeft,
          decoration: kBoxDecorationStyle,
          height: 60.0,
          child: TextFormField(
            controller: _repeatPasswordController,
            obscureText: true,
            style: TextStyle(
              color: Color.fromRGBO(0, 128, 128, 1),
              fontFamily: 'OpenSans',
            ),
            validator: (value) {
              if (value != _passwordController.text) {
                return 'The password doesnt match';
              }
              return null;
            },
            decoration: InputDecoration(
              border: InputBorder.none,
              contentPadding: EdgeInsets.only(top: 14.0),
              prefixIcon: Icon(
                Icons.lock,
                color: Color.fromRGBO(0, 128, 128, 1),
              ),
              hintText: 'Repeat password',
              hintStyle: kHintTextStyle,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildSignUpBtn() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 25.0),
      width: double.infinity,
      child: RaisedButton(
        elevation: 5.0,
        onPressed: () async {
          var password = _passwordController.text;
          var email = _emailController.text;
          var nom = _nameController.text;
          var cognoms = _cognomsController.text;

          try {
            
           
              var r = await _provider.attemptSignUp(email, password, nom, cognoms, interessos, sexe, dataNeixement);
              if(r['success'] == false) {
                displayDialog(context, "Error", r['data']['message']);
              }
              else {
                displayDialog(context, "Registrat", "Verifica el correu.").then((val) {
                    Navigator.of(context).pop();
                });
              } 
            
            } catch (err) {
              displayDialog(context, "Error", err.response.toString());
          }
        },
        padding: EdgeInsets.all(15.0),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30.0),
        ),
        color: Color.fromRGBO(0, 128, 128, 1),
        child: Text(
          'Registrar-se',
          style: TextStyle(
            color: Colors.white,
            letterSpacing: 1.5,
            fontSize: 18.0,
            fontWeight: FontWeight.bold,
            fontFamily: 'OpenSans',
          ),
        ),
      ),
    );
  }

Solution

You have missed a main Form and GlobalKeys.

Here a complete functional sample:

import 'package:flutter/material.dart';

class Password extends StatefulWidget {
  @override
  _PasswordState createState() => _PasswordState();
}

class _PasswordState extends State<Password> {
  final TextEditingController _password = TextEditingController();
  final TextEditingController _confirmPassword = TextEditingController();
  final GlobalKey<FormState> _form = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(30),
      child: Form(
          key: _form,
          child: Column(children: <Widget>[
            TextFormField(
                controller: _password,
                validator: (validator) {
                  if (validator.isEmpty) return 'Empty';
                  return null;
                }),
            TextFormField(
                controller: _confirmPassword,
                validator: (validator) {
                  if (validator.isEmpty) return 'Empty';
                  if (validator != _password.text)
                    return 'The passwords do not match';
                  return null;
                }),
            RaisedButton(
                child: Text(
                  'Registrar-se',
                ),
                elevation: 5.0,
                onPressed: () async {
                  _form.currentState.validate();
                })
          ])),
    );
  }
}

I also have made a validation more sophisticated using RxDart and Streams. Check it out on medium

Comments

[w461]

You should add the code of the Form widget. Have you assigned a key to the Form widget?

[intraector]

var r = await _provider.attemptSignUp(email, password, nom, cognoms, interessos, sexe, dataNeixement); show some code pls