How to Implement Dynamic Sorting and Filtering in a FlutterFlow E-Commerce App

Create the following Page State variables on your product listing page: sortField (String, default 'createdAt'), sortDirection (String, default 'desc'), filterCategory (String, default empty for no filter), filterMinPrice (double, default 0), filterMaxPrice (double, default 99999), filterInStock (Boolean, default false). These variables form the state machine that drives the query composition. Every sort or filter UI change updates one of these variables, which triggers a query refresh.

Add a Row at the top of the product listing page. Include a DropDown with sort options: Newest (createdAt desc), Price Low to High (price asc), Price High to Low (price desc), Highest Rated (rating desc), Most Popular (viewCount desc). When a sort option is selected, update both sortField and sortDirection in Page State. Add an IconButton next to the DropDown showing an up or down arrow based on sortDirection. Tapping it toggles between asc and desc and updates the Page State.

Add a filter section using ChoiceChips for category selection (All, Electronics, Clothing, Home, Sports). When a chip is selected, update filterCategory. Add a RangeSlider for price range that updates filterMinPrice and filterMaxPrice. Add a Switch labeled In Stock Only that updates filterInStock. Display the active filters below the controls as colored removable chips: each chip shows the filter value with an X button that resets that specific filter to its default value.

Create a Backend Query on the products collection. Build the query based on Page State: if filterCategory is not empty, add whereEqualTo on category. If filterInStock is true, add whereEqualTo inStock == true. For price range, add where price >= filterMinPrice and price <= filterMaxPrice. Add orderBy using sortField and sortDirection. Important: when using a price range filter (inequality on price), Firestore requires the first orderBy to be on the price field. If the user wants to sort by rating while filtering by price, the query will fail without a composite index or a workaround.

Firestore requires the first orderBy field to match the inequality filter field. When a user filters by price range but sorts by rating, this conflicts. Detect this case: if sortField is not 'price' AND price range filter is active, fetch products with the price filter and orderBy price, then apply a Custom Function that re-sorts the results by the desired sortField client-side. The Custom Function accepts the product list and sortField and sortDirection, then returns the re-sorted list. Display the Custom Function output instead of the raw query results.

1// Custom Function: sortProducts
2List<dynamic> sortProducts(
3  List<dynamic> products,
4  String sortField,
5  String sortDirection,
6) {
7  final sorted = List<dynamic>.from(products);
8  sorted.sort((a, b) {
9    final aVal = a[sortField] ?? 0;
10    final bVal = b[sortField] ?? 0;
11    if (aVal is num && bVal is num) {
12      return sortDirection == 'asc'
13          ? aVal.compareTo(bVal)
14          : bVal.compareTo(aVal);
15    }
16    return 0;
17  });
18  return sorted;
19}

Below the filter chips, show a Text displaying the results count: '{n} products found'. Add a Clear All button that resets all Page State filter variables to their defaults and sortField to 'createdAt' desc. This refreshes the query to show all products in default order. Also add empty state handling: when the query returns zero results, show a Container with an illustration and text 'No products match your filters. Try adjusting your criteria.' with a Clear Filters button.