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

The Sort component lets users sort products according to different criteria, such as “Price Low to High” or “Most popular”.

Brand facet list

Configure

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

1
2
3
4
5
6
7
8
9
/// Get currently selected index
Stream<SortIndex> get selectedIndex =>
    _hitsSearcher.state.map((state) => SortIndex.of(state.indexName));

/// Update target index
void selectIndexName(String indexName) {
  _hitsSearcher
      .applyState((state) => state.copyWith(indexName: indexName, page: 0));
}

The SortIndex class is defined in the sorting.dart file.

Code summary

To customize the filters view, edit these files:

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
class SortSelectorView extends StatelessWidget {
  const SortSelectorView(
      {super.key, required this.sorts, required this.onToggle});

  final Stream<SortIndex> sorts;
  final Function(String) onToggle;

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<SortIndex>(
        stream: sorts,
        builder: (context, snapshot) {
          final selectedIndex = snapshot.data;
          return SliverFixedExtentList(
              itemExtent: 40,
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  final item = SortIndex.values[index];
                  return InkWell(
                      onTap: () => onToggle(item.indexName),
                      child: Text(
                        item.title,
                        style: TextStyle(
                            fontWeight: item == selectedIndex
                                ? FontWeight.bold
                                : FontWeight.normal),
                      ));
                },
                childCount: SortIndex.values.length,
              ));
        });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class SortTitleView extends StatelessWidget {
  const SortTitleView(
      {super.key, required this.sorts, required this.isActive});

  final Stream<SortIndex> sorts;
  final bool isActive;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('Sort',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600)),
        if (!isActive)
          StreamBuilder<SortIndex>(
              stream: sorts,
              builder: (context, snapshot) =>
                  Text(snapshot.hasData ? snapshot.data!.title : '')),
      ],
    );
  }
}
Did you find this page helpful?
Algolia for Flutter v1