Guides
/
Building Search UI
/
Ecommerce ui template
/
Components
/
Product listing page filter and nav
/
Sort
Nov 02, 2023
Sort UI components
On this page
The Sort
component lets users sort products according to different criteria, such as “Price Low to High” or “Most popular”.
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 the sorting.dart
file.
Code summary
To customize the filters view, edit these files:
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?