How do I prevent an endless Listview scroll of product data being repeated on my product screens? [Flutter]

Try this:

class ProductDetailsPage extends StatefulWidget {

  static const routeName = '/user-products';
   ProductDetailsPage({Key? key}) : super(key: key); 
  @override
  State<ProductDetailsPage> createState() => _ProductDetailsPageState();
}

class _ProductDetailsPageState extends State<ProductDetailsPage> {
 //const
  DBHelper dbHelper = DBHelper();
  List<Product> loadedProduct = []; // <----update this

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      //get particular productId using the ModalRoute class
      final productId = ModalRoute.of(context)!.settings.arguments as String;
      print(productId);
      //use Provider package to find out ID by accessing method declared in Product()
      setState(() {
         loadedProduct = ProductsRepository().findById(productId);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    
    
    //List<bool> clicked = List.generate(10, (index) => false, growable: true);
      final cart = Provider.of<CartProvider>(context);
      void saveData(int index) {
        dbHelper
            .insert(
          CartItem(
            id: index,
            title: loadedProduct.name,
            price: loadedProduct.price.toDouble(),
            quantity: ValueNotifier(1),
            image: loadedProduct.image,
          ),
        )
            .then((value) {
          cart.addTotalPrice(loadedProduct.price.toDouble());
          cart.addCounter();
          print('Product Added to cart');
        }).onError((error, stackTrace) {
          print(error.toString());
        });
      }

    return Scaffold(
      backgroundColor: Colors.orange[50],
      appBar: AppBar(
        backgroundColor: Colors.deepOrange[900],
        title: const Text("Product details "),
        leading: IconButton(
          icon: const Icon(
            Icons.arrow_back_ios_outlined,
            color: Colors.black,
            semanticLabel: 'back to home',
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
        //body:
        body: ListView.builder(
            padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
            shrinkWrap: true,
            itemCount: loadedProduct.length,
            itemBuilder: (context, index) {
              return Card(
                //SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: 300,
                      width: double.infinity,
                      child: Image.asset(
                        loadedProduct.image,
                        fit: BoxFit.cover,
                      ),
                    ),
                    const SizedBox(height: 10),
                    Text(
                      '\$${loadedProduct.price}',
                      style: const TextStyle(
                        color: Colors.grey,
                        fontSize: 20,
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),
                    ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            primary: Colors.blueGrey.shade900),
                        onPressed: () {
                          saveData(Random().nextInt(1000));
                        },
                        child: const Text('Add to Cart')),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      width: double.infinity,
                      child: Text(
                        loadedProduct.description,
                        textAlign: TextAlign.center,
                        softWrap: true,
                      ),
                    ),
                  ],
                ),
              );
            })
    );
  }
}

Hello I see some weird thing there.

ProductsRepository().findById(productId) return a single Product. Then loadedProduct is a Product. Later on the ListView.builder on the itemCount parameter you used loadedProduct.length (loadedProduct in this point is used as a list of element). I dont know if the Product object have a .length method nor what returns that. But i think there is the problem. When you set itemCount: loadedProduct.length you are saying than the list will have x elements and later on the itemBuilder you are only using the data from loadedProduct to create the same widget in the list, x times.

Assuming that loadedProduct.length = 10, you will have a list view with the same Element 10 times

The next example use the loadedProduct to fill the products list. The product list will be used as the data on the ListView.builder. Then the list will show 3 time the same widget.

final products = [
  loadedProduct,
  loadedProduct,
  loadedProduct
];
return Scaffold(
    backgroundColor: Colors.orange[50],
    appBar: AppBar(
      backgroundColor: Colors.deepOrange[900],
      title: const Text("Product details "),
      leading: IconButton(
        icon: const Icon(
          Icons.arrow_back_ios_outlined,
          color: Colors.black,
          semanticLabel: 'back to home',
        ),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    ),
    //body:
    body: ListView.builder(
        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
        shrinkWrap: true,
        itemCount: products.length,
        itemBuilder: (context, index) {
          final targetProduct = products[index];
          return Card(
            //SingleChildScrollView(
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 300,
                  width: double.infinity,
                  child: Image.asset(
                    targetProduct.image,
                    fit: BoxFit.cover,
                  ),
                ),
                const SizedBox(height: 10),
                Text(
                  '\$${targetProduct.price}',
                  style: const TextStyle(
                    color: Colors.grey,
                    fontSize: 20,
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.blueGrey.shade900),
                    onPressed: () {
                      saveData(Random().nextInt(1000));
                    },
                    child: const Text('Add to Cart')),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  width: double.infinity,
                  child: Text(
                    targetProduct.description,
                    textAlign: TextAlign.center,
                    softWrap: true,
                  ),
                ),
              ],
            ),
          );
        })
);

Just think what do you want to show on the list and use the right data. And review why the Product object have a .length method and what it return.

if you want to stop scroll listview add NeverScrollableScrollPhysics

physics: const NeverScrollableScrollPhysics()

Inside ListView widget, use