颤动：如何隐藏点击文本字段时的错误消息

Question

我想在用户点击文本字段时隐藏错误文本，如果字段为空并且当我单击按钮时它会在文本字段上打印错误消息，但我想在我点击文本字段时隐藏错误消息。这是代码

Container(
                    child: Card(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15.0)),
                        child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Column(children: <Widget>[
                              TextFormField(
                                    hintText: 'Description',
                                    labelText: 'Description',
                                    labelStyle: TextStyle(color: Colors.blue)),
                                controller: descriptionController,
                                validator: (value) {
                                  if (value.isEmpty) {
                                    return 'This field is required.';
                                  }
                                  return null;
                                },
                              
                              DropdownButtonFormField<String>(
                                items: leaveType.map<DropdownMenuItem<String>>(
                                    (String value) {
                                  return DropdownMenuItem<String>(
                                      value: value, child: Text(value));
                                }).toList(),
                                hint: Text(
                                  "Please choose a leave",
                                  style: TextStyle(color: Colors.black),
                                ),
                                onChanged: (value) async {
                                  setState(() {
                                    _selectedLeave = value;
                                    leaveIndex = leaveType.indexOf(value);
                                    leave = leaveIndex + 1;
                                  });
                                },
                                value: _selectedLeave == null
                                    ? null
                                    : leaveType[leaveIndex],
                                validator: (value) => value == null
                                    ? 'Please choose leave type'
                                    : null,
                              ),
                            FlatButton( child:Text("submit",onPressed: () {
                                    if (_formKey.currentState.validate()) {
                                   callRequestLeaveApi();  //here calling a method when field are not empty
                                    }

Answer 1

从 TextField 中删除验证器，将不会显示任何红色hints/errors

Answer 2

我正在使用布尔值来处理错误文本。此外，我们将 onTap 来自 TextFiled 的方法来隐藏错误文本。

演示小部件


class DraftPage extends StatefulWidget {
  @override
  _DraftPageState createState() => _DraftPageState();
}

class _DraftPageState extends State<DraftPage> {
  final descriptionController = TextEditingController();

  bool _validate = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Card(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0)),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(
                      errorText: _validate ? 'This field is required.' : null,
                      hintText: 'Description',
                      labelText: 'Description',
                      labelStyle: TextStyle(color: Colors.blue),
                    ),
                    controller: descriptionController,
                    onTap: () {
                      setState(() {
                        _validate = false;
                      });
                    },
                  ),
                  ElevatedButton(
                    onPressed: () {
                      setState(() {
                        descriptionController.text.isEmpty
                            ? _validate = true
                            : false;
                      });
                    },
                    child: Text("press"),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

是否满足您的问题？

Answer 3

将 Form 小部件的 autovalidateMode 参数设置为 AutovalidateMode.onUserInteraction:

Form(
      key: _formKey,
      autovalidateMode: AutovalidateMode.onUserInteraction,
      ...
)

颤动：如何隐藏点击文本字段时的错误消息

flutter: How to hide the error message on tap on textfield

textfield

flutter