I’m building a Flutter app and I have this setup, in the sign_up_page.dart
I have a form field SignUpFormWidget
and a button that confirms the form called AuthButtonWidget
:
SignUpFormWidget(
formKey: _formKey,
nameController: _nameController,
emailController: _emailController,
passwordController: _passwordController,
confirmPasswordController: _confirmPasswordController,
),
// some code
AuthButtonWidget(
formKey: _formKey,
onPressed: () {
if (_formKey.currentState!.validate()) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const HomePage()),
);
}
},
text: 'Create an Account',
),
Here is the source code of the SignUpFormWidget
:
class SignUpFormWidget extends StatefulWidget {
final GlobalKey<FormState> formKey;
final TextEditingController nameController;
final TextEditingController emailController;
final TextEditingController passwordController;
final TextEditingController confirmPasswordController;
const SignUpFormWidget({
Key? key,
required this.formKey,
required this.nameController,
required this.emailController,
required this.passwordController,
required this.confirmPasswordController,
}) : super(key: key);
@override
State<SignUpFormWidget> createState() => _SignUpFormWidgetState();
}
class _SignUpFormWidgetState extends State<SignUpFormWidget> {
@override
Widget build(BuildContext context) {
return Form(
key: widget.formKey,
child: Column(
children: [
TextFieldWidget(
controller: widget.nameController,
),
const SizedBox(height: 20),
TextFieldWidget(
controller: widget.emailController,
isEmail: true,
),
const SizedBox(height: 20),
TextFieldWidget(
controller: widget.passwordController,
isPassword: true,
),
const SizedBox(height: 20),
TextFieldWidget(
controller: widget.confirmPasswordController,
isConfirmPassword: true,
),
],
),
);
}
}
And finally here is the code of the TextFieldWidget
:
class TextFieldWidget extends StatefulWidget {
final TextEditingController controller;
final bool isEmail;
final bool isPassword;
final bool isConfirmPassword;
final TextEditingController? passwordController;
TextFieldWidget({
Key? key,
required this.controller,
this.isEmail = false,
this.isPassword = false,
this.isConfirmPassword = false,
this.passwordController,
}) : super(key: key);
@override
State<TextFieldWidget> createState() => _TextFieldWidgetState();
}
class _TextFieldWidgetState extends State<TextFieldWidget> {
bool _isObscure = true;
@override
Widget build(BuildContext context) {
return TextFormField(
keyboardType:
widget.isPassword ? TextInputType.emailAddress : TextInputType.text,
obscureText:
(widget.isPassword || widget.isConfirmPassword) && _isObscure,
controller: widget.controller,
decoration: InputDecoration(
hintText: widget.isEmail
? 'Enter your email'
: widget.isPassword
? 'Set Password'
: widget.isConfirmPassword
? 'Confirm Password'
: 'Full name',
hintStyle: TextStyle(
fontWeight: FontWeight.w400,
fontFamily: 'Lato',
color: Colors.black.withOpacity(0.6),
),
filled: true,
fillColor: const Color(0xffefefef),
focusColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide.none,
),
prefixIcon: Icon(
widget.isEmail
? Icons.email
: widget.isPassword || widget.isConfirmPassword
? Icons.lock
: Icons.person,
color: const Color(0xFF1273EB),
),
suffixIcon: widget.isPassword || widget.isConfirmPassword
? IconButton(
onPressed: () {
setState(() {
_isObscure = !_isObscure;
});
},
icon: Icon(
_isObscure ? Icons.visibility : Icons.visibility_off,
color: const Color(0xFF1273EB),
),
)
: null,
),
validator: (value) {
if (value!.isEmpty) {
return widget.isEmail
? 'Please enter your email'
: widget.isPassword
? 'Please set a password'
: widget.isConfirmPassword
? 'Please confirm your password'
: 'Please enter your name';
}
if (widget.isEmail) {
final emailRegex = RegExp(
r'^[a-zA-Z0-9.]+@[a-zA-Z0-9]+.[a-zA-Z]+[.a-zA-Z]*$',
caseSensitive: false);
if (!emailRegex.hasMatch(value)) {
return 'Please enter a valid email';
}
}
if (widget.isPassword) {
if (value.length < 8) {
return 'Password must be at least 8 characters';
}
}
if (widget.isConfirmPassword) {
if (value != widget.passwordController!.text) {
return 'Passwords do not match';
}
}
return null;
},
);
}
}
I need a way to access the password value from the text field where the confirm password is being inserted so that I can add the this block of code in the validator:
final password = //// a way to get the password value
if (value != password) {
return 'Passwords do not match';
}
2
Answers
Just use your TextEditingControllers (to get text from field: passwordController.text, the text is updated after each field change).
docs: https://api.flutter.dev/flutter/widgets/TextEditingController-class.html
Get your password like this