How to Build an E-Commerce Product Filter in FlutterFlow

Create a products collection with fields: name (String), price (double), category (String: Electronics, Clothing, Home, Sports, Books), rating (double, 1.0 to 5.0), reviewCount (int), inStock (bool), imageUrl (String), description (String), createdAt (Timestamp). Add 15-20 products spanning all categories with varied prices (5 to 500), ratings (1.0 to 5.0), and a mix of in-stock and out-of-stock items. This variety is essential for testing filter combinations.

Create a ProductsPage. Add Page State: activeFilters (JSON/Map, default empty), selectedCategories (String List, default empty), minPrice (double, default 0), maxPrice (double, default 1000), minRating (double, default 0), sortBy (String, default 'newest'), inStockOnly (bool, default false). Display products in a GridView with responsive crossAxisCount (2 on mobile, 3 on tablet). At the top, add a Row with a search TextField and a Stack containing a filter IconButton with a Badge overlay showing the count of active filters. Tapping the filter icon opens the filter Bottom Sheet.

Create a Bottom Sheet with sections: Categories as multi-select ChoiceChips (Electronics, Clothing, Home, Sports, Books, with All as default). Price Range as a Custom Widget RangeSlider with min 0 and max 1000, displaying the selected range values. Minimum Rating as a Slider from 0 to 5 with 0.5 step increments, showing star icons. Sort By as a DropDown with options: Newest, Price Low to High, Price High to Low, Most Popular, Highest Rated. In Stock Only as a Switch toggle. At the bottom, add a Row with a Reset button (clears all filters to defaults) and an Apply button (saves to Page State and closes the sheet).

1// Custom Widget: PriceRangeSlider (Dart)
2import 'package:flutter/material.dart';
3
4class PriceRangeSlider extends StatefulWidget {
5  final double min;
6  final double max;
7  final double initialStart;
8  final double initialEnd;
9  final Function(double, double) onChanged;
10
11  const PriceRangeSlider({
12    required this.min,
13    required this.max,
14    required this.initialStart,
15    required this.initialEnd,
16    required this.onChanged,
17  });
18
19  @override
20  State<PriceRangeSlider> createState() => _PriceRangeSliderState();
21}
22
23class _PriceRangeSliderState extends State<PriceRangeSlider> {
24  late RangeValues _values;
25
26  @override
27  void initState() {
28    super.initState();
29    _values = RangeValues(widget.initialStart, widget.initialEnd);
30  }
31
32  @override
33  Widget build(BuildContext context) {
34    return Column(children: [
35      RangeSlider(
36        values: _values,
37        min: widget.min,
38        max: widget.max,
39        divisions: 100,
40        labels: RangeLabels(
41          '\$${_values.start.round()}',
42          '\$${_values.end.round()}',
43        ),
44        onChanged: (v) {
45          setState(() => _values = v);
46          widget.onChanged(v.start, v.end);
47        },
48      ),
49      Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
50        Text('\$${_values.start.round()}'),
51        Text('\$${_values.end.round()}'),
52      ]),
53    ]);
54  }
55}

On Apply tap in the filter Bottom Sheet, build the Backend Query dynamically. Start with the products collection. If selectedCategories is not empty and does not include All, add a where clause: category IN selectedCategories (Firestore whereIn, max 10 values). Add where price >= minPrice AND price <= maxPrice. Add where rating >= minRating. If inStockOnly is true, add where inStock == true. Apply orderBy based on sortBy: newest orders by createdAt descending, price options order by price ascending or descending, popular orders by reviewCount descending, highest rated orders by rating descending. Update the product GridView with the filtered query results.

Calculate the active filter count: increment by 1 for each non-default filter (categories selected, price range changed from 0-1000, rating above 0, sort changed from newest, inStockOnly enabled). Display this count in a Badge widget overlaid on the filter IconButton, using Conditional Visibility to hide the badge when count is 0. The Reset button in the Bottom Sheet sets all Page State filter values to their defaults, recalculates the count to 0, and re-runs the default query. Also add a chip row below the filter icon showing active filters as removable Chips that the user can tap to remove individually.