formsflutterdartflutter-layoutrequiredfieldvalidator

Flutter - Validator is not responding with the name is required text and the screen is not moving to next screen after the press


The validator is not showing the error message while I try to click the button without entering anything in the box and even after filling the box the bottom doesn't take me to the next screen.

return Scaffold(
    appBar: AppBar(
      title: Text("Feedback Form"),
    ),
    body: Container(
      child: Center(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 50, vertical: 40),
              child: TextFormField(
                validator: (String value) {
                  if (value.isEmpty) {
                    return "Name is required";
                  }
                  return null;
                },
                decoration: InputDecoration(
                    border: UnderlineInputBorder(),
                    labelText: 'Enter your Name'),
              ),
            ),
            ButtonTheme(
              child: ElevatedButton(
                child: Text("Next"),
                onPressed: () {
                  if (!_formKey.currentState.validate()) {
                    return;
                  }
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondScreen()),
                  );
                },
                style: ElevatedButton.styleFrom(
                  padding:
                      EdgeInsets.symmetric(horizontal: 25, vertical: 15),
                ),
              ),
            ),
          ],
        ),
      ),
    ));

} }


Solution

  • you forget the Form widget

    return Scaffold(
            appBar: AppBar(
              title: Text("Feedback Form"),
            ),
            body: Container(
                child: Center(
              child: Form( // add this
                autovalidateMode: AutovalidateMode.onUserInteraction, // this to show error when user is in some textField
                key: _formKey,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 50, vertical: 40),
                      child: TextFormField(
                        validator: (String value) {
                          if (value.isEmpty) {
                            return "Name is required";
                          }
                          return null;
                        },
                        decoration: InputDecoration(
                            border: UnderlineInputBorder(),
                            labelText: 'Enter your Name'),
                      ),
                    ),
                    ButtonTheme(
                      child: ElevatedButton(
                        child: Text("Next"),
                        onPressed: () {
                          if (_formKey.currentState.validate()) {  // to check if the form is validate then navigate
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => SecondScreen()),
                            );
                          }
                        },
                        style: ElevatedButton.styleFrom(
                          padding:
                              EdgeInsets.symmetric(horizontal: 25, vertical: 15),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            )));