Как создать TextField с помощью кнопки «Очистить» с помощью TextEditingController?

Question

Я пытался создать TextField с кнопкой очистки, но когда я ввожу какое-то значение, кнопка очистки не появляется, как я хотел. Похоже, он не может обнаружить изменения в _firstNameController.text. Как я могу решить эту проблему?

class TextFieldWithClearBtn extends StatefulWidget {
  @override
  _TextFieldWithClearBtnState createState() => _TextFieldWithClearBtnState();
}

class _TextFieldWithClearBtnState extends State<TextFieldWithClearBtn> {
  final TextEditingController _firstNameController = TextEditingController();

  @override
  void dispose {
    super.dispose();
    _firstNameController.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextFormField(
        controller: _firstNameController,
        decoration: InputDecoration(
          labelText: "First name",
          suffixIcon: _firstNameController.text.isNotEmpty
            ? GestureDetector(
              onTap: () {
                WidgetsBinding.instance.addPostFrameCallback((_) => _firstNameController.clear());
              },
              child: Icon(Icons.clear, color: Colors.black38),
            )
            : null
        ),
      ),
    );
  }
}

Answer 1

Вместо suffixIcon, вы suffix. Таким образом, кнопка clear не будет видна, если textformfield не в фокусе, и будет отображать icon при нажатии на поле. Кроме того, когда вы нажмете значок clear после того, как что-то введете, оно очистит поле. Рабочий пример кода ниже:

TextFormField(
      controller: _firstNameController,
                      textAlign: TextAlign.left,
                      cursorColor: Colors.white,
                      onChanged: (value) {

                      },
                      style: TextStyle(color: Colors.white),
                      decoration: InputDecoration(    
                        labelText: 'First Name',
                        suffix: GestureDetector(
                        onTap: () {
                          _firstNameController.clear();
                        },
                          child: Icon(Icons.clear)
                        )
                      ),
                    ),

Надеюсь, это поможет.