How to add clear button to TextField Widget

Question

Is there a proper way to add a clear button to the TextField?

Just like this picture from Material design guidelines:

What I found is

Answer 1

Output:

Create a variable

var _controller = TextEditingController();

And your TextField:

TextField(
  controller: _controller,
  decoration: InputDecoration(
    hintText: "Enter a message",
    suffixIcon: IconButton(
      onPressed: () => _controller.clear(),
      icon: Icon(Icons.clear),
    ),
  ),
)