Flutter/Dart: Display One product per Widget, with data retrieved as JSoN From backend API

Respected Experts,

I am trying to get my hands on Flutter and building a demo app that needs to do the following:

1. Retrieve Product data from a backend API. The GET API returns multiple products in single call

2. Render the data of all the Products one by one, based on scrolling by the user.

I have been able to accomplish #1 i.e. retrieve the data from API and display it as single list.

Here’s my rendering code:

 Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('My Product List'),
  ),

   body: ListView.builder(
   //  physics: const PageScrollPhysics(),
 //   scrollDirection: Axis.vertical,
    // this give the length of item
    itemCount: productList.length,
    itemBuilder: (context, index) {
      return ProductCard(content: productList[index]);
    },
  ),
);

}

The Product Card Looks like:

 Widget build(BuildContext context) {
return Card(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column( // this is the column
      children: [
        //      SizedBox(
        //        height: 200,
        //        width: 20,
        //        child:
        ListTile( //ListTile Supports Leading, Title/Subtitle, Trailing
          leading: Icon(Icons.star, color: Colors.red),
          title: Text(content.productHeading),
          subtitle: Column (
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Author: ${product.owner}'),
              Text('${content.productBody}')
            ],
          ),

          trailing: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Rate Me: '),
              Icon(Icons.star, color: Colors.orange),
            ],
          ),
        ),
        //   )
      ],
    ),
  ),
);

}

This code renders the list of all the products. However, what I need to render one product per page (or widget In Flutter parlance) i.e. the Product 1 on page/widget 1 and let the user scroll to next product on next page/widget.

I tried certain variations by using SizedBox, PageScrollPhysics, scrollDirection etc. So, that’s why code is bit unclean.

My questions are:

• Can I achieve the desired results with ListView? If yes, what am I missing here
• Which other widget, I should use to achieve the desired result?

PS: I am using Intellij as my IDE and running the app on Connected Chrome (web). Also, I am more of a backend person.