问题
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 prawns smothered in a spicy, sticky Asian sauce, these Asian Chilli Garlic Prawns will have you smacking your lips in utter satisfaction, feeling like you’ve just dined at a fancy modern Thai restaurant.<wbr /> </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 prawns smothered in a spicy, sticky Asian sauce, these Asian Chilli Garlic Prawns will have you smacking your lips in utter satisfaction, feeling like you’ve just dined at a fancy modern Thai restaurant.<wbr /> </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 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 taste 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": "xyz@gmail.com",
"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()),
),
],
),
),
);
}
回答1:
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])
],
)))
],
);
});
回答2:
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),
),
],
),
),
);
}
来源：https://stackoverflow.com/questions/60432234/how-to-set-the-list-of-json-data-inside-list-in-the-listview-builder-in-flutter