How to create TextField with Clear button using TextEditingController? - flutter

Question

I tried to create a TextField with clear button, but when i enter some value there's no clear button show up as I wanted to. Seems like it cant detect the changes to the _firstNameController.text. How can I solve this issue?
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

Instead of suffixIcon, you suffix. This way the clear button will not be visible if textformfield is not in focus and will display the icon when you tap on the field. Also, when you will tap on the clear icon after typing something, it'll clear the field. Working sample code below:
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)
)
),
),
Hope this helps.