How do you link multiple TextFormField form keys to a single button in FLutter?

Question

I'm trying to link multiple form keys to a single button. It says there are no errors but it is not giving me the outcome that I want.

Here is the file with the button. The TextFormFields are on different files but are imported to this one. There are three TextFormFields. One is asking for your name, the second is asking for your date of birth, the third is asking for your email.

import 'package:flutter/material.dart';
import 'package:flutter_application_5/account__info_input/name_submit_field.dart';
import 'package:flutter_application_5/account__info_input/email_submit_field.dart';
import 'package:flutter_application_5/account__info_input/birth_submit_field.dart';

class AccountInfoSubmitButton extends StatefulWidget {
  const AccountInfoSubmitButton({super.key});

  @override
  State<AccountInfoSubmitButton> createState() => __AccountInfoSubmitButtonState();
}

class __AccountInfoSubmitButtonState extends State<AccountInfoSubmitButton> {
bool isPressed = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        key : const Key('AccountInfoSubmitButton'),
        onPressed: () {
          if (formkeyname.currentState != null && formkeyname.currentState!.validate() &&
          formkeyemail.currentState != null && formkeyemail.currentState!.validate() &&
          formkeybirth.currentState != null && formkeybirth.currentState!.validate() ) {
            
            setState(() {
            
          });
          }
        },
        style: ElevatedButton.styleFrom(
          
        ), child: const Text('Submit'),
      )
    );
  }


  
}

Here is the file containing the TextFormField asking for your name

import 'package:flutter/material.dart';

final formkeyname = GlobalKey<FormState>();

class NameSubmitField extends StatefulWidget {
  const NameSubmitField({super.key});

  @override
  State<NameSubmitField> createState() => _NameSubmitFieldState();
}

class _NameSubmitFieldState extends State<NameSubmitField> {

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Form(
      key: formkeyname,
          // ignore: sized_box_for_whitespace
         child: Center(
          child: Container(
            width: 350,
            height: 200,
          child: TextFormField(
            decoration: const InputDecoration(
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Color.fromARGB(255, 15, 156, 152)),
              ),
              hintText: 'Enter your name',
              contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 90),
              hintStyle: TextStyle(
                color: Color.fromARGB(255, 15, 156, 152),
                fontSize: 20,
              )
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please Enter Your Name';
              } else {
                return 'Name Submitted';
              }
            }
          ),
          )
          )
        ),
        ]
      );
  }
}

Here is the file containing the TextFormField asking for your date of birth

import 'package:flutter/material.dart';

final formkeybirth = GlobalKey<FormState>();

class BirthSubmitField extends StatefulWidget {
  const BirthSubmitField({super.key});

  @override
  State<BirthSubmitField> createState() => _BirthSubmitFieldState();
}

class _BirthSubmitFieldState extends State<BirthSubmitField> {

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Form(
      key: formkeybirth,
          // ignore: sized_box_for_whitespace
         child: Center(
          child: Container(
            width: 400,
            height: 200,
          child: TextFormField(
            decoration: const InputDecoration(
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Color.fromARGB(255, 15, 156, 152)),
              ),
              hintText: 'Enter Your Date Of Birth',
              contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 90),
              hintStyle: TextStyle(
                color: Color.fromARGB(255, 15, 156, 152),
                fontSize: 20,
              )
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please Enter Your Date Of Birth';
              } else {
                return 'Date Of Birth Submitted';
              }
            }
          ),
          )
          )
        ),
        ]
      );
  }
}

Here is the file containing the TextFormField asking for your email

import 'package:flutter/material.dart';

final formkeyemail = GlobalKey<FormState>();

class EmailSubmitField extends StatefulWidget {
  const EmailSubmitField({super.key});

  @override
  State<EmailSubmitField> createState() => _EmailSubmitFieldState();
}

class _EmailSubmitFieldState extends State<EmailSubmitField> {
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Form(
      key: formkeyemail,
          // ignore: sized_box_for_whitespace
         child: Center(
          child: Container(
            width: 350,
            height: 200,
          child: TextFormField(
            decoration: const InputDecoration(
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Color.fromARGB(255, 15, 156, 152)),
              ),
              hintText: 'Enter Your Email',
              contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 90),
              hintStyle: TextStyle(
                color: Color.fromARGB(255, 15, 156, 152),
                fontSize: 20,
              )
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please Enter Your Email';
              } else {
                return 'Email Submitted';
              }
            }
          ),
          )
          )
        ),
        ]
      );
  }
}
  

The button is supposed to cause the TextFormFields to display (Please Enter Your "Blank") if nothing is entered and to display ("Blank" Submitted) if not blank. However this is only happening for the name TextFormField. The button is ignoring the others. What is the cause of this?

Answer 1

The textField validator property will be true when you return a null, and when a string is retured, it means there is an error in the text entered and also you are already checking for the value == null in the validator, so

If u want to display the error message to the user using the validate, you can do like this

validator: (value) {
              if (value == null || value.isEmpty) {
                return 'please enter your email';
              } 
//if it return anything other than null, .validate() will return
//false, so if you need you can use ladder if statements, but at all you need to return null
              return null;
            }

and you don't need to change anything in the button onPressed

Answer 2

change your textFields validator function with this:

validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please Enter Your Name';
              }
               return null; 
            }

Do this for all of the text fields that you want to validate