> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Showcase

> Algolia's Showcase component organizes media-rich records into scannable rows.

The home page is where the user's discovery of your products starts,
and it's where you should promote sets of products based on your business needs and audience type.
Instead of overwhelming users with a large grid of products, use showcases to group products into scannable sections such as "most popular", "trending", and "just for you".

Algolia's `Showcase` component works well on both desktop and mobile and lets you set up several rows on your home page using different settings according to your needs. For instance, you can customize them to adjust aspects such as the number of items per page and their order.

<img src="https://mintcdn.com/algolia/u8QjGPGZbKOqOFEr/images/guides/search-ui/spencer-williams-flutter-showcase.png?fit=max&auto=format&n=u8QjGPGZbKOqOFEr&q=85&s=9215d9e66fd7ed0869e78c6f4c4ef10d" alt="Screenshot of the 'Showcase' section on the SpencerandWilliams app, showing new shoes and apparel with prices and ratings." width="500" height="1082" data-path="images/guides/search-ui/spencer-williams-flutter-showcase.png" />

## Code summary

The `Showcase` component is used on the [Ecommerce UI demo site](https://algolia-pwa-ecom-ui-template.netlify.app) home page. It consists of three rows, all with the same index name but different search parameters.

You can customize `Showcase` in:

* The [`home_screen` file](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/home/home_screen.dart)
* The [`products_view` file](https://github.com/algolia/flutter-ecom-ui-template/blob/0.1.0/lib/ui/screens/home/components/products_view.dart)
* Its props

### Usage and props

<CodeGroup>
  ```dart Usage theme={"system"}
  class ProductsView extends StatelessWidget {
    const ProductsView({
      Key? key,
      required this.title,
      required this.items,
      required this.productWidget,
    }) : super(key: key);

    final String title;
    final Stream<List<Product>> items;
    final ProductWidgetBuilder productWidget;

    @override
    Widget build(BuildContext context) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SectionHeader(title: title),
          Container(
              margin: const EdgeInsets.symmetric(vertical: 8.0),
              height: 200.0,
              child: HitsListView(
                  items: items,
                  productWidget: productWidget,
                  scrollDirection: Axis.horizontal))
        ],
      );
    }
  }
  ```

  ```dart Props theme={"system"}
  final String title; // The title for the component.
  final List<Product> items; // The list of product items to show.
  final ProductWidgetBuilder productWidget; // Renders each hit from the results.
    // You can find an example component called ProductCardView.
    // It receives the product hit as a property and does the mapping between
    // the dataset attributes and the ProductCardView props to display a Showcase item.
  ```
</CodeGroup>