Having extracted my textformfield widget in method so as to minimize my code, I am trying to include a key in my form widget but I do not know how to use it for each form fields.

This is the code:

class login extends StatefulWidget {
  const login({Key? key}) : super(key: key);

  @override
  State<login> createState() => _loginState();
}

class _loginState extends State<login> {
  final _signUpFormKey = GlobalKey<FormState>();
  final _loginFormKey = GlobalKey<FormState>();

  final  _emailController = TextEditingController();
  final  _passwordController = TextEditingController();
  bool isSignupScreen = true;
  bool isAutoCorrect = true;


  @override
  void dispose() {
    super.dispose();
    _emailController.dispose();
    _passwordController.dispose();
  }

These are the extracted methods for both the login and signup:

 Container buildLoginSection() {
    return Container(
      margin: EdgeInsets.only(top: 30),
      child: Column(
        children: [
          buildTextField("[email protected]", "Email address/Phone number",
              false, false, true),
          buildTextField("......", "Password", false, true, false),
        ],
      ),
    );
  }

  Container buildSignupSection() {
    return Container(
      margin: EdgeInsets.only(top: 30),
      child: Column(
        children: [
          buildTextField( "xpresschop", "Name", true, false, false),
          buildTextField("[email protected]", "email", false, false, true),
          buildTextField("......", "password", false, true, false),
          buildTextField("......", "Confirm password", false, true, false),
        ],
      ),
    );
  }

Having called the globalkey at the beginning, I am using it here in my extracted method:

Widget buildTextField(String hintText, String labelText, bool isName,
      bool isPassword, bool isEmail) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10.0),
      child: Form(
        key: _signUpFormKey,
        child: TextFormField(
          autocorrect: isAutoCorrect,
          obscureText: isPassword,
          keyboardType:
              isEmail ? TextInputType.emailAddress : TextInputType.text,
          decoration: InputDecoration(
            hintText: hintText,
            labelText: labelText,
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(
                color: Colors.black,
              ),
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(
                color: Colors.black,
              ),
            ),
          ),
          validator: (val) {},
        ),
      ),
    );

CodePudding user response：

what you need to do is

Form(
   key: _signUpFormKey,
   Column(
    children: [
      buildTextField( "xpresschop", "Name", true, false, false),
      buildTextField("[email protected]", "email", false, false, true),
      buildTextField("......", "password", false, true, false),
      buildTextField("......", "Confirm password", false, true, false),
    ],
  ),

if you have a button for a validation

RaisedButton(
      onPressed: () async {
        // If validation is successful, then call the on pressed function
        if (_signUpFormKey.currentState.validate()) {
          
        }
      },