So I'm trying to build a GridView.builder with pagination in Flutter to display a list of items, where the fromJSON response data is like this. I used quicktype.io to serialize the json response.

{
    "content": [
        {
            "id": 111,
            "name": "RTX 3070",
            "description": "Unbenutzt!",
            "amountInCent": 3200,
            "extraInCent": 0,
            "zipcode": "16321",
            "city": "Lindenberg",
            "pictures": [
                ""
            ],
            "postedOn": "2022-04-26T10:46:06.414516Z",
            "lastModified": "2022-05-20T10:35:46.643177Z",
            "userId": "",
            "donationMadeForItem": false,
            "ngoId": 1,
            "categoryId": 3
        },
        {
            "id": 121,
            "name": "123123",
            "description": "Ikea Rigge\n\nhttps://www.ikea.com/de/de/p/rigga-garderobenstaender-weiss-50231630/?utm_source=google&utm_medium=surfaces&utm_campaign=shopping_feed&utm_content=free_google_shopping_clicks_Bedroomfurniture&gclid=CjwKCAjwsNiIBhBdEiwAJK4khsymPqcAht_nLR5CUOITZEePtIRjnpGHMCg4A_b3uw8x4LyOCH7JlRoCo_0QAvD_BwE&gclsrc=aw.ds\n\novp 15€",
            "amountInCent": 3200,
            "extraInCent": 0,
            "zipcode": "16321",
            "city": "Lindenberg",
            "pictures": [],
            "postedOn": "2022-05-10T12:19:05.517123Z",
            "lastModified": "2022-05-11T15:49:54.098196Z",
            "userId": "",
            "donationMadeForItem": true,
            "ngoId": 1,
            "categoryId": 5
        }
    ],
    "pageable": {
        "sort": {
            "empty": true,
            "sorted": false,
            "unsorted": true
        },
        "offset": 0,
        "pageNumber": 0,
        "pageSize": 10,
        "unpaged": false,
        "paged": true
    },
    "totalPages": 1,
    "totalElements": 2,
    "last": true,
    "size": 10,
    "number": 0,
    "sort": {
        "empty": true,
        "sorted": false,
        "unsorted": true
    },
    "numberOfElements": 2,
    "first": true,
    "empty": false
}

Here the model file:

@JsonSerializable()
class DetailedItem {
  List<Item>? item;
  Pageable? pageable;
  int? totalPages;
  int? totalElements;
  bool? last;
  int? size;
  int? number;
  Sort? sort;
  int? numberOfElements;
  bool? first;
  bool? empty;

  DetailedItem(
      {this.item,
      this.pageable,
      this.totalPages,
      this.totalElements,
      this.last,
      this.size,
      this.number,
      this.sort,
      this.numberOfElements,
      this.first,
      this.empty});

  factory DetailedItem.fromJson(Map<String, dynamic> json) => _$DetailedItemFromJson(json);

  Map<String, dynamic> toJson() => _$DetailedItemToJson(this);
}

and here is my API call, where I suspect the problem is coming from, but I don't know exactly what to change. I'm not really familiar with this process and I'm still learning. Thank you in advance for your help

 Future<List<Item>> fetchNgoItems(int ngoId) async {
    final http.Response response =
        await _httpClient.get("/ngo/$ngoId/item?page=$startIndex&size=$maxItemsPerPage");
    print(response.body);
    return jsonDecode(utf8.decode(response.bodyBytes))
        .map<Item>((json) => DetailedItem.fromJson(json))
        .toList();
  }

CodePudding user response：

As the error mentioned itself, your raw JSON is not a list by itself, that's why it doesn't have the "map" function. You should get json['content'] which is a list and then you can use the map function.

 Future<List<Item>> fetchNgoItems(int ngoId) async {
    final http.Response response =
        await _httpClient.get("/ngo/$ngoId/item?page=$startIndex&size=$maxItemsPerPage");
    print(response.body);
    return (jsonDecode(utf8.decode(response.bodyBytes))['content'] as List)
        .map<Item>((json) => DetailedItem.fromJson(json))
        .toList();
  }