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

Oct. 21, 2022

Sort UI components

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.

The Sort component allow users to sort products according to different criteria, for example, “Price Low to High” or “Most popular”, based on different ranking formulas (using replica indices).

Configure

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

Copy

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 sorting.dart files.

Code summary

To customize the filters view, edit the files sort_selector_view.dart and sort_title_view.dart.

Usage and props

Copy

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,
              ));
        });
  }
}

Copy

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?