Flutter nested JSON to listview

Question

I'm new to flutter and How can l parse this JSON Object to listview ?

// API response

 "code": 200,
    "message": "OK",
    "payload": {
        "items": [
            {
                "package": {
                    "order": {
                        "orderer": "xxxx",
                        "cost": {
                            "amount": "0.0",
                            "currency": {
                                "code": "USD",
                                "name": "US Dollar",
                                "symbol": "$"
                            }
                        },
                        "order_number": "212121",
                        "tracking_code": "833939339",
                        "store": {
                            "name": "ABC",
                            "id": 2,
                            "created_at": "2019-01-21T16:05:45+00:00"
                        },
                        "id": 74,
                        "created_at": "2019-02-08T11:55:14+00:00"
                    },
                    "weight": {
                        "value": "12.9000",
                        "unit": {
                            "name": "Kilogram",
                            "symbol": "kg",
                            "base": "1.00000000",
                            "id": 1
                        }
                    },
                    "length": {
                        "value": "4.0000",
                        "unit": {
                            "name": "Foot",
                            "symbol": "ft",
                            "base": "0.30480000",
                            "id": 7
                        }
                    },
                    "height": {
                        "value": "34.4000",
                        "unit": {
                            "name": "Millimetre",
                            "symbol": "mm",
                            "base": "0.00100000",
                            "id": 4
                        }
                    },
                    "width": {
                        "value": "98.5600",
                        "unit": {
                            "name": "Centimetre",
                            "symbol": "cm",
                            "base": "0.01000000",
                            "id": 2
                        }
                    },
                    "handlings": [
                        {
                            "description": "description",
                            "rate": "0.0200",
                            "icon": "icon-hazadous",
                            "id": 1
                        },
                        {
                            "description": "none ",
                            "rate": "0.0500",
                            "icon": "icon-none",
                            "id": 2
                        }
                    ],
                    "description": "Item description",
                    "id": 113,
                    "created_at": "2019-02-08T11:55:14+00:00"
                },
                "owner": {
                    "name": "Jo B",
                    "phone": "+1",
                    "blocked": false,
                    "activated": true,
                    "id": 98,
                    "created_at": "2019-01-21T16:05:46+00:00",
                    "updated_at": "2018-12-21T15:03:41+00:00"
                },
                "sender": {
                    "name": "A B C",
                    "phone": "+1",
                    "blocked": false,
                    "activated": true,
                    "id": 98,
                    "created_at": "2019-01-21T16:05:46+00:00",
                    "updated_at": "2018-12-21T15:03:41+00:00"
                },
                "creator": {
                    "name": "Jo B",
                    "phone": "+1",
                    "blocked": false,
                    "activated": true,
                    "id": 98,
                    "created_at": "2019-01-21T16:05:46+00:00",
                    "updated_at": "2018-12-21T15:03:41+00:00"
                },
                "source": {
                    "contact_name": "Some name",
                    "contact_phone": "+1",
                    "name": "Some name",
                    "longitude": "-0.0",
                    "latitude": "1.1",
                    "id": 113,
                    "created_at": "2019-02-08T11:55:14+00:00"
                },
                "destination": {
                    "contact_name": "xxxx",
                    "contact_phone": "323232232",
                    "name": "xxx ssss",
                    "longitude": "-0.0",
                    "latitude": "1.1",
                    "id": 113,
                    "created_at": "2019-02-08T11:55:14+00:00"
                },
                "fare": {
                    "amount": "3185.7377",
                    "currency": {
                        "code": "USD",
                        "name": "US Dollar",
                        "symbol": "$"
                    }
                },
                "type": {
                    "name": "some name",
                    "code": "01",
                    "commission": "0.0",
                    "id": 2,
                    "created_at": "2019-01-21T16:05:45+00:00"
                },
                "freight": {
                    "name": "Land",
                    "code": "Land",
                    "id": 1,
                    "created_at": "2019-01-21T16:05:45+00:00"
                },
                "status": {
                    "name": "Pending",
                    "code": "PENDING",
                    "id": 1,
                    "created_at": "2019-01-21T16:05:45+00:00"
                },
                "payment": {
                    "method": {
                        "name": "None",
                        "code": "None",
                        "id": 1,
                        "created_at": "2019-01-21T16:05:46+00:00"
                    },
                    "status": {
                        "name": "Unpaid",
                        "code": "UNPAID",
                        "id": 1,
                        "created_at": "2019-01-21T16:05:46+00:00"
                    },
                    "id": 113,
                    "created_at": "2019-02-08T11:55:14+00:00"
                },
                "id": 113,`enter code here`
                "created_at": "2019-02-08T11:55:14+00:00"
              ],
        "total": 34,
        "offset": 34
    }
}

Flutter async http request to fetch API data, JSON printed but l don't seem to creat listview from the JSON request.

 Future<Null> _fetchData() async {
    setState(() {
      loading = true;
    });
    final response =
        await http.get("url" ,  headers: {"someh header": "xxxx"});
    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);

// request prints here`enter code here`
      print(data);

     );
    }
  }

Answer 1

Check out this blog . I think it explains the solution to your problem with detailed steps. Let me know if this works for you! I think the point in the blog specific to your question would be JSON structure #4 : Nested structures with Lists .

Once you get the List of objects you need to display from the steps above, you can use this list in a ListView.builder to display them in your app.

Example:

showList(List<Your_Model_Class_Name> list) {
  return ListView.builder(
    shrinkWrap: true,
    itemCount: list.length,
    itemBuilder: (BuildContext context, int index) {
      /*Your widget code goes here instead of the ListTile*/
      return ListTile(
        title: Text('${list[index].title}'),
      );
    }
  );
}

You can check this link for a complete example. Let me know if this helps!

Answer 2

You're not decoding correctly

final dynamic data = json.decode(response.body)

Now when you print it, it'll show you what you want to see.