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

Question

I want to hide the error text when user tap of textfield, if fields are empty and when i click on button it prints the error message on textfield but i want, when i tap on textfield that error message should hide. here is the code

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

Set the autovalidateMode parameter of the Form widget to AutovalidateMode.onUserInteraction:

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

Answer 2

I'm using a bool to handle Error text. also, we will onTap method from TextFiled to hide error text.

Demo Widget

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

Does it satisfy your question?

Answer 3

Removing Validator from TextField, will not show any red hints/errors