Refinement widgets
On this page
The Flutter Helpers are available as alpha software. They depend on the Algolia Dart API client, which is developed by the community. Note that the Algolia SLA don’t apply to community projects. 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.
Configure the brand filter
To configure the brand filter, edit the search_repository.dart file:
1
2
3
4
5
late final _brandFacetList = FacetList(
searcher: _hitsSearcher,
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.
Configure the size filter
To configure the size filter, edit the search_repository.dart file:
1
2
3
4
5
late final _sizeFacetList = FacetList(
searcher: _hitsSearcher,
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,
));
});
}
}
