Textfield clear button not updating state

Question

I have a container that's wrapped within a gesture detector and within the container two text-fields which on clicked will show the time selector and date selector widgets consecutively. I added a clear button next to the date field and on tap it clears both the text-fields. The problem is on clicking the clear button it does not disappear even after both the text-fields have been cleared.

GestureDetector(
                onTap: () async {
                  await _pickDateTime();
                },
                child: Container(
                    margin: const EdgeInsets.only(top: 20.0),
                    width: double.infinity,
                    padding: const EdgeInsets.symmetric(
                        horizontal: 24.0, vertical: 15.0),
                    decoration: BoxDecoration(
                        color: tertiaryColor,
                        borderRadius: BorderRadius.circular(14.0)),
                    child: Column(
                      children: [
                        Row(
                          children: [
                            Flexible(
                              child: TextField(
                                enabled: false,
                                controller: _dateController,
                                onChanged: (String val) {
                                  _setDate = val;
                                },
                                decoration: InputDecoration(
                                    hintText: "Date",
                                    hintStyle: hintTextStyle,
                                    border: InputBorder.none),
                                style: todoScreenStyle,
                              ),
                            ),
                            _dateController.text.isNotEmpty &&
                                    _timeController.text.isNotEmpty
                                ? IconButton(
                                    onPressed: () {
                                      _dateController.clear();
                                      _timeController.clear();
                                    },
                                    icon: Icon(
                                      Icons.close,
                                      color: Colors.white,
                                    ))
                                : Container()
                          ],
                        ),
                        dividerStyle,
                        TextField(
                          onChanged: (String val) {
                            _setTime = val;
                          },
                          enabled: false,
                          controller: _timeController,
                          decoration: InputDecoration(
                              hintText: "Time",
                              hintStyle: hintTextStyle,
                              border: InputBorder.none),
                          style: todoScreenStyle,
                        )
                      ],
                    )),
              ),

I tried using setState but that did not work, also suffix Icon cannot be used as the whole container is wrapper within a gesture detector

Full Code on Github

For those who stumble upon this question: the answer is here: clear-button-not-changing-state

does it has to do anything either the ``enabled`` being set to false? Can you set to true or remove it and try. Also, you can use readOnly if you want to disable editing. — OMi Shah, Nov 09 '22 at 15:51
@OMiShah if `enabled` is set to true then the time selector won't be called — Rohith Nambiar, Nov 09 '22 at 16:42
I have updated the question with the link to the code, if it helps — Rohith Nambiar, Nov 09 '22 at 16:52

Fugipe · Answer 1 · 2022-11-09T15:57:14.917

1

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Test")),
        body: Column(
          children: [
            TextField(
              controller: textEditingController1,
              onChanged: (value) {
                 setState(() {});
              },
            ),
            TextField(
              controller: textEditingController2,
 onChanged: (value) {
                 setState(() {});
              },
            ),
            if (textEditingController1.text.isNotEmpty ||
                textEditingController2.text.isNotEmpty)
              {
                ElevatedButton(
                    onPressed: () {
                      textEditingController1.clear();
                      textEditingController2.clear();
                      setState(() {});
                    },
                    child: Text("Tap"))
              }.single
          ],
        ));

edited Nov 09 '22 at 15:57

answered Nov 09 '22 at 15:44

Fugipe

386
1
8

1

Using `TextEditingController` doesnt need to call setState to update the UI. – Md. Yeasin Sheikh Nov 09 '22 at 15:46
no need to call setstate here. – OMi Shah Nov 09 '22 at 15:48
1

you need to setState to update your condition "_dateController.text.isNotEmpty && _timeController.text.isNotEmpty" – Fugipe Nov 09 '22 at 15:56
@Fugipe now it makes sense after you included the full code.. – OMi Shah Nov 09 '22 at 16:44
@Fugipe It did not work, updating the code still results in the same problem – Rohith Nambiar Nov 09 '22 at 16:48
@RohithNambiar update your topic with your new code. Your problem is just a setState – Fugipe Nov 09 '22 at 17:00
@Fugipe can you elaborate, I didn't understand what you meant – Rohith Nambiar Nov 10 '22 at 16:45

Textfield clear button not updating state

1 Answers1