How to set the list of json data inside list in the Listview.builder in flutter?

Question

I am new to flutter. I have converted my json to pojo from here . My api is below. I am able to get the data from api but there are 3 food items in the Orderdata but I am only able to get value of only index 0 which is shown in image below: I have implemented as follows:

    {
    "status": "success",
    "message": "Data Fetched",
    "data": {
        "list": [
            {
                "id": 174,
                "order_code": "mkjrovcjjrvra6t3vtgo58",
                "chef_id": 1,
                "user_id": 58,
                "order_status": 2,
                "status": 3,
                "order_datetime": "2020-02-27 10:25:28",
                "user_location_id": 1,
                "instruction": null,
                "price": 2020,
                "coupon_id": null,
                "use_coupon": 0,
                "discount": 0,
                "final_price": 2020,
                "vat_amt": 262.6,
                "delivery_charge_amt": 0,
                "payment_id": 1,
                "delivery_time": null,
                "delivery_user_id": null,
                "payment_status": 0,
                "payment_price": null,
                "payment_time": null,
                "reject_message": null,
                "created_at": "2020-02-27 10:25:28",
                "updated_at": "2020-02-27 10:25:48",
                "orderdata": [
                    {
                        "id": 203,
                        "order_code_id": 174,
                        "chef_id": 1,
                        "food_id": 17,
                        "user_id": 58,
                        "additional_info": null,
                        "food_qty": 1,
                        "instruction": null,
                        "price": 400,
                        "food": {
                            "id": 17,
                            "name": "Prawns Chilli",
                            "description": "<p>Seared&nbsp;prawns&nbsp;smothered in a spicy, sticky Asian sauce, these Asian&nbsp;Chilli&nbsp;Garlic&nbsp;Prawns&nbsp;will have you smacking your lips in utter satisfaction, feeling like you&rsquo;ve just dined at a fancy modern Thai restaurant.<wbr />&nbsp;</p>",
                            "ingredient_detail": "<p>2 tablespoons reduced sodium soy sauce, 2 tablespoons freshly squeezed lime juice, 2 tablespoons canola oil, divided, 3 cloves garlic, minced, 2 teaspoons chili powder, 1 teaspoon ground cumin, 1 teaspoon dried oregano, 1 1/2 pounds skirt steak, cut into 1/2-inch pieces, 12 mini flour tortillas, warmed, 3/4 cup diced red onion, 1/2 cup chopped fresh cilantro leaves, 1 lime, cut into wedges</p>",
                            "price": 500,
                            "discount_price": 400,
                            "ribbon_text": null,
                            "image": "1581750558-1576657695-prawn-chilli3jpg.jpg",
                            "banner_image": null,
                            "published_date": "2019-12-18",
                            "is_offer": 1
                        }
                    },
                    {
                        "id": 204,
                        "order_code_id": 174,
                        "chef_id": 1,
                        "food_id": 17,
                        "user_id": 58,
                        "additional_info": null,
                        "food_qty": 3,
                        "instruction": null,
                        "price": 400,
                        "food": {
                            "id": 17,
                            "name": "Prawns Chilli",
                            "description": "<p>Seared&nbsp;prawns&nbsp;smothered in a spicy, sticky Asian sauce, these Asian&nbsp;Chilli&nbsp;Garlic&nbsp;Prawns&nbsp;will have you smacking your lips in utter satisfaction, feeling like you&rsquo;ve just dined at a fancy modern Thai restaurant.<wbr />&nbsp;</p>",
                            "ingredient_detail": "<p>2 tablespoons reduced sodium soy sauce, 2 tablespoons freshly squeezed lime juice, 2 tablespoons canola oil, divided, 3 cloves garlic, minced, 2 teaspoons chili powder, 1 teaspoon ground cumin, 1 teaspoon dried oregano, 1 1/2 pounds skirt steak, cut into 1/2-inch pieces, 12 mini flour tortillas, warmed, 3/4 cup diced red onion, 1/2 cup chopped fresh cilantro leaves, 1 lime, cut into wedges</p>",
                            "price": 500,
                            "discount_price": 400,
                            "ribbon_text": null,
                            "image": "1581750558-1576657695-prawn-chilli3jpg.jpg",
                            "banner_image": null,
                            "published_date": "2019-12-18",
                            "is_offer": 1
                        }
                    },
                    {
                        "id": 205,
                        "order_code_id": 174,
                        "chef_id": 1,
                        "food_id": 4,
                        "user_id": 58,
                        "additional_info": null,
                        "food_qty": 3,
                        "instruction": null,
                        "price": 140,
                        "food": {
                            "id": 4,
                            "name": "Chili Momo",
                            "description": "<p>This juicy steamed momos are prepared from the ground water buffalo meat and are called \"Buff&nbsp;momo\". The wrappers are very thinly rolled and the filling is deliciously spicy and juicy, served along with tangy yellow chutney and classic spicy tomato sauce that compliments the&nbsp;taste&nbsp;of steamed momos.</p>",
                            "ingredient_detail": "<p>Tomato, Ground meat ,Flour, Chilli pepper, Garlic, Ginger, Scallion, Black pepper and Soy sauce</p>",
                            "price": 150,
                            "discount_price": 140,
                            "ribbon_text": null,
                            "image": "1580971029-c-momojfif.jfif",
                            "banner_image": null,
                            "published_date": "2019-11-18",
                            "is_offer": 1
                        }
                    }
                ],
                "userdata": {
                    "id": 58,
                    "name": "Name",
                    "email": "[email protected]",
                    "mobileno": "98XXXXXXX"
                }
            }
        ]
    }
    }

I have implemented as follows:

Outer listview of cards

 Widget _buildCardList(BuildContext context) {
return foodData.length == 0
    ? _isLoading
        ? Text("")
        : Center(
            child: Text("No Request"),
          )
    : ListView.builder(
        itemCount: foodData == null ? 0 : foodData.length,
        itemBuilder: (context, int index) {
          return Wrap(
            children: <Widget>[
              Container(
                  margin: EdgeInsets.only(bottom: 10),
                  child: Card(
                      child: Column(
                    children: <Widget>[
                      _buildCardView(context, index),
                      _cardBottomView(context, index)
                    ],
                  )))
            ],
          );
        });
      }

 Widget _buildCardView(BuildContext context, int index) {
print("Card " + index.toString());
return Wrap(
  children: <Widget>[
    Container(
      child: Container(
        margin: EdgeInsets.all(10.0),
        child: Column(
          children: <Widget>[
            _cardTopSection(context, index),
            SizedBox(
              height: 5,
            ),
            _cardFoodExplain(context),
            _cardMiddleSection(context,index),
            _cardTotalPrice(context, index),
            Container(
              height: 1,
              color: Color.fromRGBO(232, 232, 232, 1),
            ),
          ],
        ),
      ),
    ),
  ],
);
}

CardMiddleSection:

Widget _cardMiddleSection(BuildContext context, int i) {
return Container(
  margin: EdgeInsets.only(top: 10.0),
  child: ListView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount:
          foodData[i].orderdata == null ? 0 : foodData[i].orderdata.length,
      itemBuilder: (context,  i) {
        for ( i =0; i < foodData[i].orderdata.length; i++) {
          print("Card Middle" + i.toString());
          return  _cardMiddleItems(i);
        }
      }),
);
}

CardMiddleItems:

 _cardMiddleItems(int i) {
print("Card Items" + i.toString());
num total =
    foodData[i].orderdata[i].foodQty * foodData[i].orderdata[i].price;
return Container(
  margin: EdgeInsets.only(bottom: 5.0),
  child: Padding(
    padding: EdgeInsets.only(top: 3, bottom: 3),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Expanded(
          child: Text("${foodData[i].orderdata[i].food.name}"),
        ),
        Expanded(
          child: Center(child: Text("${foodData[i].orderdata[i].foodQty}")),
        ),
        Expanded(
          child: Text("${foodData[i].orderdata[i].price}"),
        ),
        Expanded(
          child: Text(total.toString()),
        ),
      ],
    ),
  ),
);
}

In itemBuilder, your index variable has two responsibility, Is that your issue? — Tokenyet
– Tokenyet, Commented Feb 27, 2020 at 12:19
Yes...there are list of datas and also orderdata. In orderdata list the loop is not working — Nabin Dhakal
– Nabin Dhakal, Commented Feb 29, 2020 at 4:40
As I said, you made a mistake in _cardMiddleSection, that index has two responsibility(index = 0), but I don't think you should be sloved by this so I made a comment instead of answer. If this slove the problem, you could make an answer yourself. If not, edit and posting more info to let viewers help. — Tokenyet
– Tokenyet, Commented Mar 1, 2020 at 9:41

Ski · Accepted Answer · 2020-03-12 12:18:20Z

try to get rid of generic names such as index, and i, and update your code instead with a more descriptive names, for example foodDataIndex, and orderDataIndex, you should be able to see the error that you are doing more easily.

Method _cardMiddleItems then should take 2 arguments, instead of 1:

_cardMiddleItems(foodDataIndex, orderDataIndex) { 
  ...
}

Few other tips

This code:

foodData[i].orderdata == null ? 0 : foodData[i].orderdata.length,

can be written shorter as:

foodData[i].orderdata?.length ?? 0

Instead of passing index numbers, and using methods, it might be good idea to instead extract it to separate widgets, and pass whole objects instead of index numbers:

-itemBuilder: (context, int index) {
+itemBuilder: (context, int foodDataIndex) {
          return Wrap(
            children: <Widget>[
              Container(
                  margin: EdgeInsets.only(bottom: 10),
                  child: Card(
                      child: Column(
                    children: <Widget>[
-                      _buildCardView(context, index),
-                      _cardBottomView(context, index)
+                      CardView(foodItem=foodData[foodDataIndex]),
+                      CardBottomView(foodItem=foodData[foodDataIndex])
                    ],
                  )))
            ],
          );
        });

Nabin Dhakal · Accepted Answer · 2020-03-15 17:17:34Z

It was due to the i has to handle two task. Solved this by changing _cardMiddleSection as follows:

     Widget _cardMiddleSection(BuildContext context, int i) {
    return Container(
      margin: EdgeInsets.only(top: 10.0),
      child: ListView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemCount:
              foodData[i].orderdata == null ? 0 : foodData[i].orderdata.length,
          itemBuilder: (context, int index) {
           return _cardMiddleItems(foodData[i].orderdata[index]);
          }),
    );
  }

and CardMiddleItems to this:

_cardMiddleItems(Orderdata orderdata) {
num total =
    orderdata.foodQty * orderdata.price;
return Container(
  margin: EdgeInsets.only(bottom: 5.0),
  child: Padding(
    padding: EdgeInsets.only(top: 3, bottom: 3),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Expanded(
          child: Text(orderdata.food.name,textAlign: TextAlign.start,),

        ),
        Expanded(
          child: Center(child: Text(orderdata.foodQty.toString()))
        ),
        Expanded(
          child: Text(orderdata.price.toString(),textAlign: TextAlign.end),
        ),
        Expanded(
          child: Text(total.toString(),textAlign: TextAlign.end),
        ),
      ],
    ),
  ),
);
}

Collectives™ on Stack Overflow

How to set the list of json data inside list in the Listview.builder in flutter?

2 Answers 2

Few other tips

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Few other tips

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related