text_field_suffix_button

A simple widget that renders the a button as text input's suffix icon, which have a few behaviours:

Clear Button

Widget build(BuildContext context) {
  final controller = TextEditingController();

  return TextField(
    decoration: InputDecoration(
      suffixIcon: TextFieldSuffixButton(controller: controller),
    ),
    controller: controller,
  );
}

A TextEditingController that shared with the field is required to make the button function properly. When controller.text isn't empty, a button with x icon is show. When user clicked, it clear the text of the field.

Paste or Clear

Widget build(BuildContext context) {
  final controller = TextEditingController();

  return TextField(
    decoration: InputDecoration(
      suffixIcon: TextFieldSuffixButton(
        controller: controller,
        enablePaste: true,
      ),
    ),
    controller: controller,
  );
}

When enablePaste set to true, widget render a paste button when text is empty, and a clear button when text is not empty. The paste button allow user to paste the text from clipboard into the text field when clicked.

Show button only when focused

Widget build(BuildContext context) {
  final controller = TextEditingController();
  final focusNode = FocusNode();

  return TextField(
    decoration: InputDecoration(
      suffixIcon: TextFieldSuffixButton(
        controller: controller,
        enablePaste: true,
        focusNode: focusNode,
      ),
    ),
    controller: controller,
    focusNode: focusNode,
  );
}

An optional FocusNode that shared with the text field can be given. Then the focusNode is given, the button hides itself by default, and only shows when the field is focused. It works with both clear button and paste button.

Libraries

text_field_suffix_button