skip to Main Content

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


  1. 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

    Login or Signup to reply.
  2. Get your password like this

    final password = passwordController.text;
    if (value != password) {
      return 'Passwords do not match';
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search