Refinement widgets
On this page
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.
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,
));
});
}
}
