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

Display products

On this page

The Display products components lets you 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 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 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 users scrolls down the screen PagedHitsListView, PagedHitsGridView
Did you find this page helpful?
Algolia for Flutter v1