> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sort UI components

> Sort components let users sort products by different attributes, for example, by price or popularity in ascending or descending order.

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

<img src="https://mintcdn.com/algolia/QUuhkPGiow1bP-ae/images/guides/search-ui/spencer-williams-filters-sort.png?fit=max&auto=format&n=QUuhkPGiow1bP-ae&q=85&s=2b52e5e56ed1053c3a7050791eba2e95" alt="Screenshot of a 'Filter and Sort' menu with sorting options, expandable 'Brand' and 'Size' sections, and 'Clear Filters' and 'See 106 Products' buttons." width="1170" height="2532" data-path="images/guides/search-ui/spencer-williams-filters-sort.png" />

## Configure

To configure the `Sort` filter, edit the [`search_repository.dart`](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/data/search_repository.dart#L67-L74) file:

```dart Usage icon=code theme={"system"}
/// 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 [`sort_index.dart`](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/model/sort_index.dart) file.

## Code summary

To customize the filters view, edit these files:

* [`sort_selector_view.dart`](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/filters/components/sort_selector_view.dart)
* [`sort_title_view.dart`](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/filters/components/sort_title_view.dart)

### Usage and props

<CodeGroup>
  ```dart Usage theme={"system"}
  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,
                ));
          });
    }
  }
  ```

  ```dart Props theme={"system"}
  Stream<Sorting> sorts; // Stream of sorting indexes
  Function(String) onToggle; // Callback on sorting index select
  ```
</CodeGroup>

<CodeGroup>
  ```dart Usage theme={"system"}
  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 : '')),
        ],
      );
    }
  }
  ```

  ```dart Props theme={"system"}
  Stream<Sorting> sorts; // Stream of sorting indexes
  bool isActive; // Tells if sort view is active
  ```
</CodeGroup>