> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Filter Toggle

> Lets users toggle a specific filter.

<div className="not-prose algolia-flavor-switcher">
  <div className="afs-dropdown">
    <div className="afs-trigger" role="button" tabIndex="0" aria-haspopup="listbox">
      <span className="afs-current">Flutter</span>

      <svg className="afs-chevron lucide lucide-chevron-down" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6" />
      </svg>
    </div>

    <ul className="afs-menu" role="listbox">
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/toggle-refinement/js"><span className="afs-option-name">JavaScript</span><span className="afs-option-lib">InstantSearch.js</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/toggle-refinement/react"><span className="afs-option-name">React</span><span className="afs-option-lib">React InstantSearch</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/toggle-refinement/vue"><span className="afs-option-name">Vue</span><span className="afs-option-lib">Vue InstantSearch</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/toggle-refinement/ios"><span className="afs-option-name">iOS</span><span className="afs-option-lib">InstantSearch iOS</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/toggle-refinement/android"><span className="afs-option-name">Android</span><span className="afs-option-lib">InstantSearch Android</span></a></li>
      <li role="option" aria-selected="true"><a className="afs-option is-current" href="/doc/api-reference/widgets/toggle-refinement/flutter"><span className="afs-option-name">Flutter</span><span className="afs-option-lib">Algolia for Flutter</span></a></li>
    </ul>
  </div>
</div>

{/* vale Algolia.HeadingPronouns = NO */}

## About this widget

Filter Toggle is a filtering view that displays any [filter](/doc/guides/managing-results/refine-results/filtering) and lets users refine their search results by toggling the view on or off.

## Examples

```dart Dart icon=code theme={"system"}
class SearchToggleFilter extends StatelessWidget {
  const SearchToggleFilter(
      this.filterState, this.groupID, this.filter, this.label,
      {super.key});

  final FilterState filterState;
  final FilterGroupID groupID;
  final Filter filter;
  final String label;

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: filterState.filters,
        builder: (context, snapshot) {
          final filters = snapshot.hasData ? snapshot.data! : StatelessFilters();
          final filterGroups = filters.toFilterGroups().expand((group) => group);
          return FilterChip(
            label: Text(label),
            onSelected: (selected) => selected
                ? filterState.add(groupID, {filter})
                : filterState.remove(groupID, {filter}),
            selected: filterGroups.contains(filter),
          );
        });
  }
}
```