Best approach for async loading data for each item in a GridView/ListView

[ad-on-is]

I have the following scenario

https://endpointA.com/products

[
{"id": 1, "title": "Some product title", "price": 22.9},
]

https://endpointB.com/product/:id/images

{"product_id": 1, "big": "https://endpointC.com/jwekrjwerl.jpg", "thumb": "https://endpointC.com/kwejrowieurwi.jpg"}

Now, I need to first fetch all products, show them in a GridView, with an image placeholder, and afterwards fetch the endpoint of the images for each product and reload only the item in the GridView (not the whole GridView) after the image is retreived

My intended (very simplified) solution would be something like this

Controller.dart

   final products = <Rx<Product>>[];
   
   getProducts() async {
     final res = get('/products');
     products.addAll(res.body.map((e) => Product.fromJson(e).obs).toList()));
     update(); // now the GridView renders with placeholders
     products.foreach((product) async {
       product.value.image = await getImage(product.value.id);
       product.refresh(); // each item should now update separetly after image is fetched
     });
   }

View.dart

ListView.builder(itemCount:controller.products.length, builder: (ctx, index) => Obx(() => ProductItem(controller.products(index))));

Would this be the way to go, or is there a better solution?

[DizzyDuan]

Is there a better solution?

@jasonlaw @ad-on-is

---

           GetBuilder<ListController>(
             id: "list",
             builder: (controller) {
               return ListView.builder(
                 itemBuilder: (context, index) {
                   return Obx(
                     () => Text(
                       controller.list[index]["text"],
                       style: TextStyle(
                         color: Colors.red,
                         fontSize: 14,
                       ),
                     ),
                   );
                 },
                 itemCount: controller.list.length,
               );
             },
           ),

---

           GetBuilder<ListController>(
             id: "list",
             builder: (controller) {
               return ListView.builder(
                 itemBuilder: (context, index) {
                   return GetBuilder<ListController>(
                     id: index,
                     builder: (controller) {
                       return Text(
                         controller.list[index]["text"],
                         style: TextStyle(
                           color: Colors.red,
                           fontSize: 14,
                         ),
                       );
                     },
                   );
                 },
                 itemCount: controller.list.length,
               );
             },
           ),

---

Which of the above two methods is the best?

[CodeWithJeet1204]

Use Future Builder inside itemBuilder