[Feature request] Highlight the selected filter item.

[thanglq1]

Platforms

Android, iOS

Description

It would be nice if we could highlight the selected filter item. Please add configuration options for border width and border color for it.

Why

No response

[hm21]

This is already possible with customWidgets as you can see in the WhatsApp-Example here. The design of the current WhatsApp filter button can you see here.

[thanglq1]

Thank you @hm21

[thanglq1]

Hi @hm21. I'm trying to use the default FilterEditor, but it doesn't work. Please help explain.

filterEditor: CustomWidgetsFilterEditor(
              appBar: (filterEditor, rebuildStream) => ReactiveCustomAppbar(
                stream: rebuildStream,
                builder: (_) => _appBarFilterEditor(filterEditor),
              ),
              filterButton: (
                  filter,
                  isSelected,
                  scaleFactor,
                  onSelectFilter,
                  editorImage,
                  filterKey,
                  ) {
                return WhatsAppFilterBtn(
                  filter: filter,
                  isSelected: isSelected,
                  onSelectFilter: () {
                    onSelectFilter.call();
                    editorKey.currentState?.setState(() {});
                  },
                  editorImage: editorImage,
                  filterKey: filterKey,
                  scaleFactor: scaleFactor,
                );
              },
            ),

[hm21]

I'm not sure what didn't work because you didn't mention it. But what I saw is that you are invoking the wrong editor. In the WhatsApp example, the filter editor is inside the main editor, but in the default example, the filter editor is standalone. You can access the filter editor like below:

filterEditor: CustomWidgetsFilterEditor(
  filterButton: (
    filter,
    isSelected,
    scaleFactor,
    onSelectFilter,
    editorImage,
    filterKey,
  ) {
    return WhatsAppFilterBtn(
      filter: filter,
      isSelected: isSelected,
      onSelectFilter: () {
        onSelectFilter.call();
        editorKey.currentState?.filterEditor.currentState
            ?.setState(() {});
      },
      editorImage: editorImage,
      filterKey: filterKey,
      scaleFactor: scaleFactor ?? 1,
    );
  },
),

[thanglq1]

Hi @hm21. Thank you so much. You are right. I'm using wrong editor.