Guides / Building Search UI / Ecommerce ui template / Components / Product listing page filter and nav / Refinement widgets

Algolia for Flutter is beta software according to Algolia’s Terms of Service (“Beta Services”). To share feedback or report a bug, open an issue.

Configure your filters with FacetList fields in the search_repository.dart file. Behind the scenes, the FacetList uses a FilterState to apply and listen to filters changes, and a HitsSearcher to update the search state and get the list of facets from search operations.

You can refine these facets:

Brand filter

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

Brand facet list

Configure the brand filter

To configure the brand filter, edit the search_repository.dart file:

1
2
3
4
late final _brandFacetList = _hitsSearcher.buildFacetList(
  filterState: _filterState,
  attribute: 'brand',
);

Code summary

You can customize the filters view in brand_selector_view.dart file.

Usage and props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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,
              ));
        });
  }
}

Size filter

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

Size facet list

Configure the size filter

To configure the size filter, edit the search_repository.dart file:

1
2
3
4
late final _sizeFacetList = _hitsSearcher.buildFacetList(
  filterState: _filterState,
  attribute: 'available_sizes',
);

Code summary

You can customize the filters view in size_selector_view.dart file.

Usage and props

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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,
              ));
        });
  }
}
Did you find this page helpful?
Algolia for Flutter v0