Flutter Question posted in
The official Flutter documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    The issue is with the Textfield widget, you are calling the validate property, but if you going to use it in a if statement, you should return a bool value, where as your validate property is returning a string.

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

    //create a String variable
String errorMsg=null;

validator: (value) {
              if (value == null || value.isEmpty) {
                errorMsg = 'please enter your email';
                return false;
              } else {
                errorMsg 'Email Submitted';
                return true;
              }
            }
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search