Flutter show error when Password not match - flutter

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',
),
),
),
);
}

Answer 1

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