Guides / Building Search UI / Ecommerce ui template / Components / Product listing page display / Display products

Display products

On this page

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 Display products components allow you to display multiple products using different layouts. Paged hits widgets allow loading more product pages while scrolling.

Use:

Products list

The HitsListView widgets displays multiple products as a horizontal or vertical list view.

Hits list view

Code summary

You can customize HitsListView in:

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
34

class HitsListView extends StatelessWidget {
  const HitsListView(
      {Key? key,
      required this.items,
      required this.productWidget,
      this.scrollDirection = Axis.vertical})
      : super(key: key);

  final Stream<List<Product>> items;
  final ProductWidgetBuilder productWidget;
  final Axis scrollDirection;

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<Product>>(
      stream: items,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final products = snapshot.data ?? [];
          return ListView.separated(
              padding: const EdgeInsets.all(8),
              scrollDirection: scrollDirection,
              itemCount: products.length,
              itemBuilder: (BuildContext context, int index) {
                return productWidget(context, products[index]);
              },
              separatorBuilder: (context, index) => const SizedBox(width: 10));
        } else {
          return const Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

Paged products list

The PagedHitsListView widgets displays multiple products as a list view. As the users scroll down the page, more products get loaded automatically.

Paged hits list view

Code summary

You can customize PagedHitsListView in:

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

class PagedHitsListView extends StatelessWidget {
  const PagedHitsListView(
      {Key? key,
      required this.pagingController,
      this.onHitClick,
      this.noItemsFound})
      : super(key: key);

  final PagingController<int, Product> pagingController;
  final Function(String)? onHitClick;
  final WidgetBuilder? noItemsFound;

  @override
  Widget build(BuildContext context) {
    return PagedListView<int, Product>.separated(
      shrinkWrap: true,
      pagingController: pagingController,
      separatorBuilder: (context, index) => const SizedBox(height: 10),
      builderDelegate: PagedChildBuilderDelegate<Product>(
        noItemsFoundIndicatorBuilder: noItemsFound,
        itemBuilder: (context, item, index) => ProductItemView(
            product: item,
            imageAlignment: Alignment.bottomCenter,
            onProductPressed: (objectID) => onHitClick?.call(objectID)),
      ),
    );
  }
}

Paged products grid list

The PagedHitsListView widgets displays multiple products as a grid list view. As the users scroll down the page, more products get loaded automatically.

Paged hits grid list view

Code summary

You can customize PagedHitsGridView in:

Mode switcher

The ModeSwitcherView widget allows users to switch between a grid and a product list. This lets them see more details about the products, such as extended descriptions or larger product images.

Hits results view modes

Code summary

You can customize ModeSwitcherView in:

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
34
35
36
37
38
39
40
41
42
43
44

class ModeSwitcherView extends StatelessWidget {
  const ModeSwitcherView(
      {Key? key, required this.currentDisplay, this.onPressed})
      : super(key: key);

  final HitsDisplay currentDisplay;
  final Function(HitsDisplay)? onPressed;

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Text('Display'),
        const SizedBox(width: 10),
        SizedBox(
          height: 20,
          width: 20,
          child: IconButton(
            splashRadius: 10,
            padding: const EdgeInsets.all(0.0),
            onPressed: () => onPressed?.call(HitsDisplay.grid),
            icon: Icon(Icons.grid_view,
                size: 20,
                color: HitsDisplay.grid == currentDisplay ? Colors.blue : null),
          ),
        ),
        const SizedBox(width: 10),
        SizedBox(
          height: 20,
          width: 20,
          child: IconButton(
            splashRadius: 10,
            padding: const EdgeInsets.all(0.0),
            onPressed: () => onPressed?.call(HitsDisplay.list),
            icon: Icon(Icons.view_list,
                size: 20,
                color: HitsDisplay.list == currentDisplay ? Colors.blue : null),
          ),
        ),
      ],
    );
  }
}

External packages used

The paged list products views components depend on the following Flutter packages:

Package Description Used by
infinite_scroll_pagination Lazily load and display pages of items as the user scrolls down your screen PagedHitsListView, PagedHitsGridView
Did you find this page helpful?
Algolia for Flutter v0