Clear controller textfield flutter

Question

I'm facing something strange. I have textfield in my app that can be cleared without problem, and once cleared, the delete icon disappears. But, when i want to clear a textfield that is in a AlertDialog, the text is cleared, but the icon to delete stays on.

final TextEditingController _namespaceController = TextEditingController();

  void clearNamespaceController() {
    _namespaceController.clear();
    setState(() {});
  }

Widget _displayDialogForEdition(result, index, context) {
    return IconButton(
        icon: Icon(Icons.edit),
        onPressed: () {
          setState(() {
            _namespaceController.text = result[index].name;
          });

          showDialog<String>(
            context: context,
            builder: (BuildContext context) => AlertDialog(
              title: const Text("Modification d'une configuration"),
              content: Container(
                // padding: EdgeInsets.all(16),
                child: TextField(
                  controller: _namespaceController,
                  decoration: InputDecoration(
                      prefixIcon: Icon(Icons.search, color: Theme.of(context).primaryColor),
                      border: OutlineInputBorder(),
                      labelText: 'Exclure le Namespace',
                      suffixIcon: _namespaceController.text.length == 0
                          ? null
                          : IconButton(
                              icon: Icon(Icons.clear),
                              onPressed: clearNamespaceController,
                            ),
                      labelStyle: Theme.of(context).textTheme.headline6),
                ),
              ),
              actions: <Widget>[
                TextButton(
                  onPressed: () => Navigator.pop(context, 'Cancel'),
                  child: const Text('Cancel'),
                ),
                TextButton(
                  onPressed: () => Navigator.pop(context, 'OK'),
                  child: const Text('OK'),
                ),
              ],
            ),
          );
        });
  }

That's because you `Focus` stays on that field. Plus, I don't think you can remove the `prefixIcon` its `prefix` that's hidden until something taps on the `TextField` — Hamza, Jun 05 '21 at 10:14
Thanks ok it was that, i need to unfocus to make it appear. I don't want to remove the prefixIcon, but the suffixIcon. You can put as answer, i will validate , thanks — Kévin, Jun 05 '21 at 10:23

Chirag Bargoojar · Accepted Answer · 2021-06-05T11:24:34.570

You need to use StatefulBuilder() to use setState() inside AlertBox(). Using StatefulBuilder() it build the UI of only your AlertBox(). If you don't use StatefulBuilder() the UI of your AlertBox() wont update if you check your _controller.text==0 and change your Icon. You can use like this.

showDialog(
              context: context,
              builder: (ctx) {
                bool isTextClear = true;
                return StatefulBuilder(builder: (ctx, setState) {
                  return AlertDialog(
                    title: Text("Add name"),
                    content: Container(
                      child: TextField(
                        controller: _controller,
                        onChanged: (val) {
                          setState(
                            () {
                              if (_controller.text.isEmpty) {
                                isTextClear = true;
                              } else {
                                isTextClear = false;
                              }
                            },
                          );
                        },
                        decoration: InputDecoration(
                          labelText: "Name",
                          prefixIcon: Icon(Icons.search),
                          suffixIcon: isTextClear
                              ? null
                              : IconButton(
                                  onPressed: () {
                                    setState(() {
                                      isTextClear = true;
                                      _controller.clear();
                                    });
                                  },
                                  icon: Icon(
                                    Icons.clear,
                                  ),
                                ),
                        ),
                      ),
                    ),
                  );
                });
              },
            );

You can try here

score 0 · Answer 2 · answered Jun 05 '21 at 11:22

0

That's because your TextField holds the Focus you need to unfocus that in order to get what you want.

answered Jun 05 '21 at 11:22

Hamza

1,523
15
33

Clear controller textfield flutter

2 Answers2