[Feature] Filters on columns - add x clear button to filter textfield.

[slavap]

It will allow to remove the filter much quicker.

[stan-at-work]

@slavap This can be done manualy by using this: (i create a PR: #125)

      PlutoColumn(
        title: 'column1',
        field: 'column1',
        type: PlutoColumnType.text(),
        filterSuffixIcon: Icon(Icons.clear),
        onFilterSuffixTap:
            (focusNode, controller, enabled, handleOnChanged, stateManager) {
          controller.clear();
          handleOnChanged(controller.text);
        },
      ),

[slavap]

@stan-at-work Thanks, but unfortunately not completely - this Clear button should be invisible if there is no text typed in the filter.
filterWidgetBuilder may allow to solve it - but better it to be "out of the box" functionality.

[stan-at-work]

@stan-at-work Thanks, but unfortunately not completely - this Clear button should be invisible if there is no text typed in the filter. filterWidgetBuilder may allow to solve it - but better it to be "out of the box" functionality.

...

No i'm joking, i will try to come up; with something

[stan-at-work]

@slavap Hre you go:

I updated the code to use a filterWidgetDelegate this is clearer to used in sthead of all the parameters in the plutoColumn.

PlutoColumn(
  title: 'column1',
  field: 'column1',
  type: PlutoColumnType.text(),
  filterWidgetDelegate: PlutoFilterColumnWidgetDelegate.textField(
    filterSuffixIcon: Builder(
      builder: (context) {
        return Icon(
          Icons.info,
          color: Theme.of(context).colorScheme.primary,
        );
      },
    ),
    onFilterSuffixTap:
        (focusNode, controller, enabled, handleOnChanged, stateManager) {
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text('Zakaaaayyy')));
    },
    filterHintText: 'Filter by column1',
    filterHintTextColor: Colors.blue,
    onClear: () {
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text('Clear')));
    },
    clearIcon: Builder(builder: (context) {
      return Icon(
        Icons.clear,
        color: Theme.of(context).colorScheme.error,
      );
    }),
  ),
)

If u just want the clear thing:

onClear: () {
  ScaffoldMessenger.of(context)
      .showSnackBar(const SnackBar(content: Text('Clear')));
},
clearIcon: Builder(builder: (context) {
  return Icon(
    Icons.clear,
    color: Theme.of(context).colorScheme.error,
  );
}),
),

Bezig.met.opnemen.2024-12-17.162123.mp4

[slavap]

@stan-at-work thank you, but still I don't see desired behavior on your video :-)
Example:
Column1 -> nothing typed in the filter -> no clear button shown
Column1 -> some filter text typed -> clear button shown

Something based on _textController.text.isNotEmpty
Makes no sense to show Clear button if there is nothing to clear.

And let's say we have filtering typed for Column1 and Column5 - and now none of them is focused, focus is on the grid.
In that case we should see Clear button on Col1 and Col5, and no Clear button on other columns - so it is visually easier to see by which columns filter was set.