'How can I make a table in flutter where I can see the prices of items for different stores side by side?

I have the following class and list:

Class:

class ProductPrice {
  final int productPriceId;
  final String establishment;
  final String product;
  final double price;

  const ProductEstablishmentPrice({
    required this.productPriceId,
    required this.establishment,
    required this.product,
    required this.price,
  });
}

List:

List<ProductEstablishmentPrice> _productEstablishmentPrices = [
    ProductEstablishmentPrice(
      productPriceId: 1,
      establishment: 'Store 1',
      product: 'Product 1',
      price: 25.00,
    ),
    ProductEstablishmentPrice(
      productPriceId: 2,
      establishment: 'Store 1',
      product: 'Product 2',
      price: 10.50,
    ),
    ProductEstablishmentPrice(
      productPriceId: 3,
      establishment: 'Store 1',
      product: 'Product 3',
      price: 0.50,
    ),
    ProductEstablishmentPrice(
      productPriceId: 4,
      establishment: 'Store 1',
      product: 'Product 4',
      price: 1.50,
    ),
    ProductEstablishmentPrice(
      productPriceId: 5,
      establishment: 'Store 1',
      product: 'Product 5',
      price: 13.75,
    ),
    ProductEstablishmentPrice(
      productPriceId: 6,
      establishment: 'Store 2',
      product: 'Product 1',
      price: 25.00,
    ),
    ProductEstablishmentPrice(
      productPriceId: 7,
      establishment: 'Store 2',
      product: 'Product 2',
      price: 12.50,
    ),
    ProductEstablishmentPrice(
      productPriceId: 8,
      establishment: 'Store 2',
      product: 'Product 3',
      price: 5.50,
    ),
    ProductEstablishmentPrice(
      productPriceId: 9,
      establishment: 'Store 2',
      product: 'Product 4',
      price: 6.50,
    ),
    ProductEstablishmentPrice(
      productPriceId: 10,
      establishment: 'Store 2',
      product: 'Product 5',
      price: 0.75,
    )
  ];

I want to make a table/ list where I can see for all the products in the list the prices for each store side by side. See attached image for an example of what I want to accomplish. In the future I will have more stores and products in the list.

The side by side comparison must be dynamically generated from the list I added as an example.

Thank you in advance.

Sample



Solution 1:[1]

you can use a ListView and set the scroll to horizontal

ListView (
children : [
          Card(
            child: ListTile(
              title:Text("List Item 1") ,
            )
          ),
          Card(
            child: ListTile(
              title: Text("List Item 2"),
            ),
          ),
          Card(
            child: ListTile(
              title: Text("List Item 3"),
            )
          ),
],
scrollDirection: Axis.horizontal,
)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Father Russia