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

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
              ],
            ),
          ],
        )
        )
        )
    );
  }
}

CodePudding user response：

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,
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}