Skip to main content
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. Screenshot of a mobile ecommerce page showing a products list with items like shoes and jackets, each with a name, price, and star rating.

Code summary

You can customize HitsListView in:

Usage and props

Paged products list

The PagedHitsListView widgets displays multiple products as a list view. As users scroll down the page, more products get loaded automatically. Screenshot of a paged products list showing search results for 'men' with items, prices, ratings, and sale tags.

Code summary

You can customize PagedHitsListView in:

Usage and props

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. Screenshot of a paged products grid list showing men's fashion items with product images, names, prices, and ratings.

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. Screenshot of a 'Display' mode switcher with two icons: a grid view icon and a list view icon, located above a product grid.

Code summary

You can customize ModeSwitcherView in:

Usage and props

External packages used

The paged list products views components depend on the following Flutter packages:
Last modified on June 16, 2026