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

# Refinements

> Refinement components let users filter results.

The *Filters and refinements* components allow users to filter results from a drawer.
The drawer can be shown or hidden.

<img src="https://mintcdn.com/algolia/u8QjGPGZbKOqOFEr/images/guides/search-ui/spencer-williams-hits-header-filters.png?fit=max&auto=format&n=u8QjGPGZbKOqOFEr&q=85&s=2beeca6afd686b220b173605a67d8b68" alt="Screenshot of a mobile shopping app showing a 'Filter and Sort' button at the top right, above a grid of men's fashion items with prices and ratings." width="1170" height="2532" data-path="images/guides/search-ui/spencer-williams-hits-header-filters.png" />

## Filters and sort

The `FiltersScreen` component provides a way to filter the results.
Each filter is displayed in an silver list. You can show or hide the filters.

<img src="https://mintcdn.com/algolia/QUuhkPGiow1bP-ae/images/guides/search-ui/spencer-williams-filters.png?fit=max&auto=format&n=QUuhkPGiow1bP-ae&q=85&s=d606a9e771c5fc45b47b6a2812806c0c" alt="Screenshot of a 'Filter and Sort' drawer with 'Sort', 'Brand', and 'Size' options, plus icons, and 'Clear Filters' and 'See 106 Products' buttons." width="1170" height="2532" data-path="images/guides/search-ui/spencer-williams-filters.png" />

### Code summary

To customize the `FiltersScreen` component, edit the [filters\_screen.dart](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/filters/filters_screen.dart) file.

#### Usage and props

```dart Usage icon=code theme={"system"}
class FiltersScreen extends StatefulWidget {
  const FiltersScreen({super.key});

  @override
  State<FiltersScreen> createState() => _FiltersScreenState();
}

enum FiltersSection { none, sort, brand, size }

class _FiltersScreenState extends State<FiltersScreen> {
  FiltersSection activeSection = FiltersSection.none;

  bool _isActive(FiltersSection section) => section == activeSection;

  @override
  Widget build(BuildContext context) {
    final searchRepository = context.read<SearchRepository>();
    return Padding(
        padding: EdgeInsets.only(
            top: MediaQuery.of(context).padding.top,
            bottom: MediaQuery.of(context).padding.bottom,
            left: 10,
            right: 10),
        child: Column(
          children: [
            const FiltersHeaderView(),
            const SizedBox(
              height: 10,
            ),
            Expanded(
              child: CustomScrollView(
                slivers: [
                  _sortHeader(searchRepository.selectedIndex),
                  if (_isActive(FiltersSection.sort))
                    SortSelectorView(
                      sorts: searchRepository.selectedIndex,
                      onToggle: searchRepository.selectIndexName,
                    ),
                  _brandHeader(),
                  if (_isActive(FiltersSection.brand))
                    BrandSelectorView(
                      facets: searchRepository.brandFacets,
                      onToggle: searchRepository.toggleBrand,
                    ),
                  _sizeHeader(),
                  if (_isActive(FiltersSection.size))
                    SizeSelectorView(
                      facets: searchRepository.sizeFacets,
                      onToggle: searchRepository.toggleSize,
                    ),
                ],
              ),
            ),
            const Divider(),
            FiltersFooterView(
              metadata: searchRepository.searchMetadata,
              onClear: searchRepository.clearFilters,
            ),
          ],
        ));
  }

  Widget _sortHeader(Stream<SortIndex> sorts) {
    const section = FiltersSection.sort;
    final isActive = _isActive(section);
    return ExpandableHeaderView(
      title: SortTitleView(
        sorts: sorts,
        isActive: isActive,
      ),
      isActive: isActive,
      onToggle: () => _toggleSection(section),
    );
  }

  Widget _brandHeader() {
    const section = FiltersSection.brand;
    return ExpandableHeaderView(
      title: const Text('Brand',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600)),
      isActive: _isActive(section),
      onToggle: () => _toggleSection(section),
    );
  }

  Widget _sizeHeader() {
    const section = FiltersSection.size;
    return ExpandableHeaderView(
      title: const Text('Size',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600)),
      isActive: _isActive(section),
      onToggle: () => _toggleSection(section),
    );
  }

  _toggleSection(FiltersSection section) => setState(
      () => activeSection = _isActive(section) ? FiltersSection.none : section);
}
```

### Components

`FilterScreen` uses the following components:

| Component                                                                                                                                         | Description                                   |
| ------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| [Facets](/doc/guides/building-search-ui/ecommerce-ui-template/components/in-depth/product-listing-page-filter-and-nav/refinement-widgets/flutter) | Filter product results with facets            |
| [Sort](/doc/guides/building-search-ui/ecommerce-ui-template/components/in-depth/product-listing-page-filter-and-nav/sort/flutter)                 | Sort products according to different criteria |