How to add an input cross that erases the entered value? - flutter

Question

I have a field for entering a phone number. The task is that as soon as one character has been entered, a cross appears on the right, which erases everything that the user has entered. It should only appear when at least one character has been entered into the field. If not, then it is invisible. How can this be implemented?
class PhoneScreen extends StatefulWidget {
const PhoneScreen({Key? key}) : super(key: key);
#override
State<PhoneScreen> createState() => _PhoneScreenState();
}
class _PhoneScreenState extends State<PhoneScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Padding(
padding: EdgeInsets.fromLTRB(20, MediaQuery.of(context).size.height * 0.2, 20, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
decoration: new InputDecoration(labelText: "Enter your number"),
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
),
],
)
)
)
);
}
}

Answer 1

try the code below.
These are the steps with explanation:
Create a TextEditingController and link the controller to the input, now we can get value of the input using _inputController.text
Next add a boolean value to check if we can show the icon.
Change the boolean value in the onChanged function
With the suffixIcon property in the InputDecoration we add the IconButton and call two lines to reset input value and set the _showIcon value to false
PS: remember the setState calls the build method, so you can avoid unnecessary rebuilds by creating a custom input widget and reuse it
EDIT:
fixed keyboard does not work after you erase the entered value
class PhoneScreen extends StatefulWidget {
const PhoneScreen({Key? key}) : super(key: key);
#override
State<PhoneScreen> createState() => _PhoneScreenState();
}
class _PhoneScreenState extends State<PhoneScreen> {
final TextEditingController _inputController = TextEditingController();
bool _showIcon = false;
// Dispose the _inputController to release memory
#override
void dispose() {
_inputController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Padding(
padding: EdgeInsets.fromLTRB(
20, MediaQuery.of(context).size.height * 0.2, 20, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
onChanged: (String value) {
setState(() {
_showIcon = value.isNotEmpty;
});
},
controller: _inputController,
decoration: InputDecoration(
labelText: "Enter your number",
suffixIcon: _showIcon
? IconButton(
onPressed: () {
setState(() {
// Use the clear method instead of assigning an empty string
_inputController.clear();
_showIcon = false;
});
},
icon: const Icon(Icons.close),
)
: null,
),
keyboardType: TextInputType.number,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
],
),
],
),
),
),
);
}
}