> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Display products
> The "Display products" components display multiple products.
The *Display products* components lets you display multiple products using different layouts.
Paged hits widgets allow loading more product pages while scrolling.
Use:
* The [`HitsListView` widget](#products-list) to display a list view of products
* The [`PagedHitsListView` widget](#paged-products-list) to display infinite list view of products
* The [`PagedHitsGridView` widget](#paged-products-grid-list) to display infinite grid list view of products
* The [`ModeSwitcherView` widget](#mode-switcher) to switch between list view modes
## Products list
The `HitsListView` widgets displays multiple products as a horizontal or vertical list view.
### Code summary
You can customize `HitsListView` in:
* [The home screen](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/home/home_screen.dart#L142-L154)
* [The `ProductsView` file](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/home/components/products_view.dart#L30-L33)
* [The `HitsListView` file](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/home/components/hits_list_view.dart)
#### Usage and props
```dart Usage theme={"system"}
class HitsListView extends StatelessWidget {
const HitsListView(
{Key? key,
required this.items,
required this.productWidget,
this.scrollDirection = Axis.vertical})
: super(key: key);
final Stream> items;
final ProductWidgetBuilder productWidget;
final Axis scrollDirection;
@override
Widget build(BuildContext context) {
return StreamBuilder>(
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());
}
},
);
}
}
```
```dart Props theme={"system"}
final Stream> items; // Stream of products hits to display
final ProductWidgetBuilder productWidget; // View to display a product
final Axis scrollDirection; // List scroll direction
```
## Paged products list
The `PagedHitsListView` widgets displays multiple products as a list view.
As users scroll down the page, more products get loaded automatically.
### Code summary
You can customize `PagedHitsListView` in:
* [The search results screen](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/products/search_results_screen.dart#L84-L87)
* [The `PagedHitsListView` file](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/products/components/paged_hits_list_view.dart)
#### Usage and props
```dart Usage theme={"system"}
class PagedHitsListView extends StatelessWidget {
const PagedHitsListView(
{Key? key,
required this.pagingController,
this.onHitClick,
this.noItemsFound})
: super(key: key);
final PagingController pagingController;
final Function(String)? onHitClick;
final WidgetBuilder? noItemsFound;
@override
Widget build(BuildContext context) {
return PagedListView.separated(
shrinkWrap: true,
pagingController: pagingController,
separatorBuilder: (context, index) => const SizedBox(height: 10),
builderDelegate: PagedChildBuilderDelegate(
noItemsFoundIndicatorBuilder: noItemsFound,
itemBuilder: (context, item, index) => ProductItemView(
product: item,
imageAlignment: Alignment.bottomCenter,
onProductPressed: (objectID) => onHitClick?.call(objectID)),
),
);
}
}
```
```dart Props theme={"system"}
final PagingController pagingController; // Controller for paged widget
final Function(String)? onHitClick; // Callback on product click
final WidgetBuilder? noItemsFound; // No results view
```
## 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.
### Code summary
You can customize `PagedHitsGridView` in:
* [The search results screen](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/products/search_results_screen.dart#L89-L92)
* [The `PagedHitsGridView` file](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/products/components/paged_hits_grid_view.dart)
## 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.
### Code summary
You can customize `ModeSwitcherView` in:
* [The search results file](https://github.com/algolia/pwa-ecom-ui-template/blob/v0.8.6/components/refinements-bar/refinements-bar.tsx#L58)
* [The `ModeSwitcherView` file](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/products/search_results_screen.dart#L68-L70)
#### Usage and props
```dart Usage icon=code theme={"system"}
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),
),
),
],
);
}
}
```
```dart Props theme={"system"}
final HitsDisplay currentDisplay; // Current hits list mode
final Function(HitsDisplay)? onPressed; // Callback on mode click
```
## External packages used
The *paged list products views* components depend on the following Flutter packages:
| Package | Description | Used by |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ---------------------------------------- |
| [`infinite_scroll_pagination`](https://pub.dev/packages/infinite_scroll_pagination) | Lazily load and display pages of items as users scrolls down the screen | `PagedHitsListView`, `PagedHitsGridView` |