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

# Refinement widgets

> Refinement widgets let you filter product results with facets.

export const Filter = () => <Tooltip tip="A filter is a condition that limits which records Algolia returns. Filters often use one or more facet-value pairs, such as brand:Apple AND color:red. You can also filter by numeric values, dates, tags, booleans, or geographic constraints." cta="Filtering" href="/doc/guides/managing-results/refine-results/faceting">
    filter
  </Tooltip>;

export const Facet = () => <Tooltip tip="An attribute in your records that lets users filter or group results (for example, by color, brand, or price)." cta="Faceting" href="/doc/guides/managing-results/refine-results/faceting">
    facet
  </Tooltip>;

Configure your filters with `FacetList` fields in the [`search_repository.dart`](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/data/search_repository.dart) file.
Behind the scenes, the `FacetList` uses a `FilterState` to listen to each <Filter /> change and
a `HitsSearcher` to update the search state and return each <Facet /> from search operations.

You can refine these facets:

* [Brand](#brand-filter)
* [Size](#size-filter)

## Brand filter

Use the `Brand` filter to only show search results from one or more brands.

<img src="https://mintcdn.com/algolia/QUuhkPGiow1bP-ae/images/guides/search-ui/spencer-williams-filters-brand.png?fit=max&auto=format&n=QUuhkPGiow1bP-ae&q=85&s=47fe296b631089ae4f9bf781509e5caa" alt="Screenshot of a 'Brand' filter with checkboxes for various brand names, and buttons for 'Clear Filters' and 'See 52 Products'." width="1170" height="2532" data-path="images/guides/search-ui/spencer-williams-filters-brand.png" />

### Configure the brand filter

To configure the brand filter, edit the [`search_repository.dart`](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/data/search_repository.dart#L20-L24) file:

```dart Dart icon=code theme={"system"}
late final _brandFacetList = _hitsSearcher.buildFacetList(
  filterState: _filterState,
  attribute: 'brand',
);
```

### Code summary

You can customize the filters view in [brand\_selector\_view.dart](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/filters/components/brand_selector_view.dart) file.

#### Usage and props

<CodeGroup>
  ```dart Usage theme={"system"}
  class BrandSelectorView extends StatelessWidget {
    const BrandSelectorView(
        {super.key, required this.facets, required this.onToggle});

    final Stream<List<SelectableFacet>> facets;
    final Function(String) onToggle;

    @override
    Widget build(BuildContext context) {
      return StreamBuilder<List<SelectableFacet>>(
          stream: facets,
          builder: (context, snapshot) {
            final facets = snapshot.data ?? [];
            return SliverFixedExtentList(
                itemExtent: 44,
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    final facet = facets[index];
                    return InkWell(
                      child: Row(children: [
                        Icon(
                          facet.isSelected
                              ? Icons.check_box
                              : Icons.check_box_outline_blank,
                        ),
                        const SizedBox(
                          width: 5,
                        ),
                        Text(facet.item.value),
                        const Spacer(),
                        Text(facet.item.count > 0 ? '${facet.item.count}' : ''),
                      ]),
                      onTap: () => onToggle(facet.item.value),
                    );
                  },
                  childCount: facets.length,
                ));
          });
    }
  }
  ```

  ```dart Props theme={"system"}
  Stream<List<SelectableFacet>> facets; // Stream of facet lists (w/ selection status)
  Function(String) onToggle; // Callback on facet toggle
  ```
</CodeGroup>

## Size filter

Use the `Size` filter to only show search results matching one or more product sizes.

<img src="https://mintcdn.com/algolia/QUuhkPGiow1bP-ae/images/guides/search-ui/spencer-williams-filters-size.png?fit=max&auto=format&n=QUuhkPGiow1bP-ae&q=85&s=b55a3126741f1f8ba5f0987bc28d29cd" alt="Screenshot of a 'Size' filter with options 'L', 'M', 'S', 'XL', 'XXL', 'XXXL', and sizes '0' to '58', with 'M' and 'S' selected." width="1170" height="2532" data-path="images/guides/search-ui/spencer-williams-filters-size.png" />

### Configure the size filter

To configure the size filter, edit the [`search_repository.dart`](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/data/search_repository.dart#L27-L31) file:

```dart Dart icon=code theme={"system"}
late final _sizeFacetList = _hitsSearcher.buildFacetList(
  filterState: _filterState,
  attribute: 'available_sizes',
);
```

### Code summary

You can customize the filters view in [size\_selector\_view.dart](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/filters/components/size_selector_view.dart) file.

#### Usage and props

<CodeGroup>
  ```dart Usage theme={"system"}
  class SizeSelectorView extends StatelessWidget {
    const SizeSelectorView(
        {super.key, required this.facets, required this.onToggle});

    final Stream<List<SelectableFacet>> facets;
    final Function(String) onToggle;

    @override
    Widget build(BuildContext context) {
      return StreamBuilder<List<SelectableFacet>>(
          stream: facets,
          builder: (context, snapshot) {
            final facets = snapshot.data ?? [];
            return SliverGrid(
                gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 65.0,
                  mainAxisSpacing: 10.0,
                  crossAxisSpacing: 10.0,
                  childAspectRatio: 2.5,
                ),
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    final facet = facets[index];
                    if (facet.isSelected) {
                      return ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            backgroundColor: AppTheme.darkBlue,
                            padding: const EdgeInsets.all(2),
                          ),
                          onPressed: () => onToggle(facet.item.value),
                          child: Text(facet.item.value));
                    } else {
                      return OutlinedButton(
                          style: OutlinedButton.styleFrom(
                            foregroundColor: AppTheme.darkBlue,
                            side: const BorderSide(
                                width: 1.0,
                                color: AppTheme.darkBlue,
                                style: BorderStyle.solid),
                            padding: const EdgeInsets.all(2),
                          ),
                          onPressed: () => onToggle(facet.item.value),
                          child: Text(facet.item.value));
                    }
                  },
                  childCount: facets.length,
                ));
          });
    }
  }
  ```

  ```dart Props theme={"system"}
  Stream<List<SelectableFacet>> facets; // Stream of facet lists (w/ selection status)
  Function(String) onToggle; // Callback on facet toggle
  ```
</CodeGroup>