Flutter

Question

当我尝试单击按钮而不在框中输入任何内容时，验证器没有显示错误消息，即使在填充框后底部也没有将我带到下一个屏幕。

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),
                ),
              ),
            ),
          ],
        ),
      ),
    ));

} }

Answer 1

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),
                    ),
                  ),
                ),
              ],
            ),
          ),
        )));

Answer 2

将表单添加为中心小部件的子项

Flutter - 验证器没有响应名称是必需的文本，并且屏幕在按下后没有移动到下一个屏幕

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

forms

dart

flutter-layout

requiredfieldvalidator