listview – Displaying specific items in a lisview from the api response Flutter

Good day everyone

I want to display items from the api data in a listview on the next page on button submit, may you please help. I have managed to print the api data response in the console using response.data, now I just want to show certain items in a list, not all the data.

I want to achieve the results like the below screenshot I posted.

Below is my api response:

[
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 11,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "AdjustedValues",
        "Value": [],
        "ServiceResponsePropertyId": 474,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 1
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 11,
        "CategoryId": 1,
        "Category": "General",
        "Description": "ServiceStatus",
        "Value": {
            "StatusCode": 1,
            "StatusDescription": "Ok",
            "StatusDetail": "",
            "RestServiceStatus": null,
            "ServiceResource": null
        },
        "ServiceResponsePropertyId": 475,
        "MappingId": 0,
        "IsVisible": false,
        "PackageRequestId": 13818024,
        "SortOrder": 1
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 6,
        "CategoryId": 1,
        "Category": "General",
        "Description": "CarId",
        "Value": 120354,
        "ServiceResponsePropertyId": 100,
        "MappingId": 0,
        "IsVisible": false,
        "PackageRequestId": 13818024,
        "SortOrder": 1
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 6,
        "CategoryId": 1,
        "Category": "General",
        "Description": "Year",
        "Value": 2017,
        "ServiceResponsePropertyId": 103,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 6
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 6,
        "CategoryId": 1,
        "Category": "General",
        "Description": "Full Model Description",
        "Value": "2017 AUDI A3 Sedan 1.0T FSI S tronic [2016-2017]",
        "ServiceResponsePropertyId": 104,
        "MappingId": 0,
        "IsVisible": false,
        "PackageRequestId": 13818024,
        "SortOrder": 1
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 6,
        "CategoryId": 1,
        "Category": "General",
        "Description": "Model",
        "Value": "A3 Sedan 1.0T FSI S tronic [2016-2017]",
        "ServiceResponsePropertyId": 105,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 5
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 6,
        "CategoryId": 1,
        "Category": "General",
        "Description": "ImageUrl",
        "Value": "https://cdn.lightstoneauto.co.za/PHOTOS/AUDI/120354_1_Z7.jpg",
        "ServiceResponsePropertyId": 107,
        "MappingId": 0,
        "IsVisible": false,
        "PackageRequestId": 13818024,
        "SortOrder": 1
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 6,
        "CategoryId": 1,
        "Category": "General",
        "Description": "Make",
        "Value": "AUDI",
        "ServiceResponsePropertyId": 110,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 3
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 6,
        "CategoryId": 1,
        "Category": "General",
        "Description": "Type",
        "Value": "AUDI A3 Sedan",
        "ServiceResponsePropertyId": 111,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 4
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 6,
        "CategoryId": 1,
        "Category": "General",
        "Description": "ServiceStatus",
        "Value": {
            "StatusCode": 1,
            "StatusDescription": "Ok",
            "StatusDetail": "",
            "RestServiceStatus": null,
            "ServiceResource": null
        },
        "ServiceResponsePropertyId": 125,
        "MappingId": 0,
        "IsVisible": false,
        "PackageRequestId": 13818024,
        "SortOrder": 1
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 7,
        "CategoryId": 1,
        "Category": "General",
        "Description": "ServiceStatus",
        "Value": {
            "StatusCode": 1,
            "StatusDescription": "Ok",
            "StatusDetail": "",
            "RestServiceStatus": null,
            "ServiceResource": null
        },
        "ServiceResponsePropertyId": 126,
        "MappingId": 0,
        "IsVisible": false,
        "PackageRequestId": 13818024,
        "SortOrder": 9999
    },
    {
        "CarId": 0,
        "SpecCategory": "General",
        "Id": -1,
        "SourceId": -1,
        "ServiceId": 7,
        "CategoryId": 1,
        "Category": "General",
        "Description": "Body shape",
        "Value": "Sedan",
        "ServiceResponsePropertyId": 320,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 9999
    },
    {
        "CarId": 0,
        "SpecCategory": "General",
        "Id": -6,
        "SourceId": -6,
        "ServiceId": 7,
        "CategoryId": 1,
        "Category": "General",
        "Description": "Drive type",
        "Value": "4x2",
        "ServiceResponsePropertyId": 154,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 9999
    },
    {
        "CarId": 0,
        "SpecCategory": "General",
        "Id": -7,
        "SourceId": -7,
        "ServiceId": 7,
        "CategoryId": 1,
        "Category": "General",
        "Description": "Fuel type",
        "Value": "Petrol",
        "ServiceResponsePropertyId": 153,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 9999
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "LastFiveSales",
        "Value": [
            {
                "SaleId": 698229,
                "CarId": 120354,
                "SaleYear": 2017,
                "SaleDateTime": "2022-06-09T15:30:38Z",
                "SalePrice": 299900.0,
                "MunicipalityName": "CITY OF TSHWANE",
                "Id": 0,
                "SourceId": 0,
                "ServiceId": 0,
                "CategoryId": 0,
                "Category": null,
                "Description": null,
                "Value": null,
                "ServiceResponsePropertyId": 0,
                "MappingId": 1,
                "IsVisible": false,
                "PackageRequestId": 0,
                "SortOrder": 0
            },
            {
                "SaleId": 695530,
                "CarId": 120354,
                "SaleYear": 2017,
                "SaleDateTime": "2022-05-30T13:24:17Z",
                "SalePrice": 289995.0,
                "MunicipalityName": "CITY OF TSHWANE",
                "Id": 0,
                "SourceId": 0,
                "ServiceId": 0,
                "CategoryId": 0,
                "Category": null,
                "Description": null,
                "Value": null,
                "ServiceResponsePropertyId": 0,
                "MappingId": 1,
                "IsVisible": false,
                "PackageRequestId": 0,
                "SortOrder": 0
            },
            {
                "SaleId": 685020,
                "CarId": 120354,
                "SaleYear": 2017,
                "SaleDateTime": "2022-04-14T12:27:37Z",
                "SalePrice": 366948.0,
                "MunicipalityName": "EMFULENI",
                "Id": 0,
                "SourceId": 0,
                "ServiceId": 0,
                "CategoryId": 0,
                "Category": null,
                "Description": null,
                "Value": null,
                "ServiceResponsePropertyId": 0,
                "MappingId": 1,
                "IsVisible": false,
                "PackageRequestId": 0,
                "SortOrder": 0
            },
            {
                "SaleId": 683843,
                "CarId": 120354,
                "SaleYear": 2017,
                "SaleDateTime": "2022-04-11T15:00:38Z",
                "SalePrice": 315500.0,
                "MunicipalityName": "UMHLATHUZE",
                "Id": 0,
                "SourceId": 0,
                "ServiceId": 0,
                "CategoryId": 0,
                "Category": null,
                "Description": null,
                "Value": null,
                "ServiceResponsePropertyId": 0,
                "MappingId": 1,
                "IsVisible": false,
                "PackageRequestId": 0,
                "SortOrder": 0
            },
            {
                "SaleId": 652718,
                "CarId": 120354,
                "SaleYear": 2017,
                "SaleDateTime": "2022-04-01T11:53:45Z",
                "SalePrice": 339900.0,
                "MunicipalityName": "CITY OF TSHWANE",
                "Id": 0,
                "SourceId": 0,
                "ServiceId": 0,
                "CategoryId": 0,
                "Category": null,
                "Description": null,
                "Value": null,
                "ServiceResponsePropertyId": 0,
                "MappingId": 1,
                "IsVisible": false,
                "PackageRequestId": 0,
                "SortOrder": 0
            }
        ],
        "ServiceResponsePropertyId": 481,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 0
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "ServiceStatus",
        "Value": {
            "StatusCode": 1,
            "StatusDescription": "Ok",
            "StatusDetail": "",
            "RestServiceStatus": null,
            "ServiceResource": null
        },
        "ServiceResponsePropertyId": 482,
        "MappingId": 0,
        "IsVisible": false,
        "PackageRequestId": 13818024,
        "SortOrder": 0
    },
    {
        "EstimateType": "Auction",
        "CarId": 0,
        "Id": 1,
        "SourceId": 1,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "Auction Estimate",
        "Value": 189400.0,
        "ServiceResponsePropertyId": 494,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 1
    },
    {
        "EstimateType": "Cost",
        "CarId": 0,
        "Id": 2,
        "SourceId": 2,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "Cost Estimate",
        "Value": 238300.0,
        "ServiceResponsePropertyId": 495,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 1
    },
    {
        "EstimateType": "Cost",
        "CarId": 0,
        "Id": 3,
        "SourceId": 3,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "Cost Estimate High",
        "Value": 259800.0,
        "ServiceResponsePropertyId": 496,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 3
    },
    {
        "EstimateType": "Cost",
        "CarId": 0,
        "Id": 4,
        "SourceId": 4,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "Cost Estimate Low",
        "Value": 218700.0,
        "ServiceResponsePropertyId": 497,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 2
    },
    {
        "EstimateType": "Retail",
        "CarId": 0,
        "Id": 5,
        "SourceId": 5,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "Retail Estimate",
        "Value": 300800.0,
        "ServiceResponsePropertyId": 498,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 1
    },
    {
        "EstimateType": "Retail",
        "CarId": 0,
        "Id": 6,
        "SourceId": 6,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "Retail Estimate High",
        "Value": 327900.0,
        "ServiceResponsePropertyId": 499,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 3
    },
    {
        "EstimateType": "Retail",
        "CarId": 0,
        "Id": 7,
        "SourceId": 7,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "Retail Estimate Low",
        "Value": 276000.0,
        "ServiceResponsePropertyId": 500,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 2
    },
    {
        "EstimateType": "Trade",
        "CarId": 0,
        "Id": 8,
        "SourceId": 8,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "Trade Estimate",
        "Value": 261300.0,
        "ServiceResponsePropertyId": 501,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 1
    },
    {
        "EstimateType": "Trade",
        "CarId": 0,
        "Id": 9,
        "SourceId": 9,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "Trade Estimate High",
        "Value": 284900.0,
        "ServiceResponsePropertyId": 502,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 3
    },
    {
        "EstimateType": "Trade",
        "CarId": 0,
        "Id": 10,
        "SourceId": 10,
        "ServiceId": 12,
        "CategoryId": 5,
        "Category": "Valuation",
        "Description": "Trade Estimate Low",
        "Value": 239800.0,
        "ServiceResponsePropertyId": 503,
        "MappingId": 0,
        "IsVisible": true,
        "PackageRequestId": 13818024,
        "SortOrder": 2
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 11,
        "CategoryId": 7,
        "Category": "Report",
        "Description": "ReportUrl",
        "Value": "https://pdf.lightstoneauto.co.za/Index.aspx?sourceurl=https://cdn.lightstoneauto.co.za/REPORTS/LIVE/ba22673b-0f05-4ae9-b212-0369a7c793ad.html",
        "ServiceResponsePropertyId": 0,
        "MappingId": 0,
        "IsVisible": false,
        "PackageRequestId": 0,
        "SortOrder": 0
    },
    {
        "Id": 0,
        "SourceId": 0,
        "ServiceId": 11,
        "CategoryId": 7,
        "Category": "Report",
        "Description": "HtmlUrl",
        "Value": "https://cdn.lightstoneauto.co.za/REPORTS/LIVE/ba22673b-0f05-4ae9-b212-0369a7c793ad.html",
        "ServiceResponsePropertyId": 0,
        "MappingId": 0,
        "IsVisible": false,
        "PackageRequestId": 0,
        "SortOrder": 0
    }
]

Below is the class where I display the listview, when I navigate here, it just becomes blank and crashes.

class _ResultsPageState extends State<ResultsPage> {
  List<Vehicle> objectList = [];
  // Vehicle? objectList;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: objectList.length,
        itemBuilder: (context, index) {
          return Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(10),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        const Text(
                          "Make",
                          //  style: Colors.black,
                        ),
                        Text(objectList[index].value.toString()),
                      ],
                    ),
                  ],
                ),
              )
            ],
          );
        },
      ),
    );
  }
}

Also below is my model class

class Vehicle {
  int? id;
  int? sourceId;
  int? serviceId;
  int? categoryId;
  String? category;
  String? description;
  List<Null>? value;
  int? serviceResponsePropertyId;
  int? mappingId;
  bool? isVisible;
  int? packageRequestId;
  int? sortOrder;

  Vehicle(
      {this.id,
      this.sourceId,
      this.serviceId,
      this.categoryId,
      this.category,
      this.description,
      this.value,
      this.serviceResponsePropertyId,
      this.mappingId,
      this.isVisible,
      this.packageRequestId,
      this.sortOrder});

  Vehicle.fromJson(Map<String, dynamic> json) {
    id = json['Id'];
    sourceId = json['SourceId'];
    serviceId = json['ServiceId'];
    categoryId = json['CategoryId'];
    category = json['Category'];
    description = json['Description'];
    if (json['Value'] != null) {
      value = <Null>[];
      json['Value'].forEach((v) {
        // value!.add(Null.fromJson(v));
      });
    }
    serviceResponsePropertyId = json['ServiceResponsePropertyId'];
    mappingId = json['MappingId'];
    isVisible = json['IsVisible'];
    packageRequestId = json['PackageRequestId'];
    sortOrder = json['SortOrder'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = Map<String, dynamic>();
    data['Id'] = this.id;
    data['SourceId'] = this.sourceId;
    data['ServiceId'] = this.serviceId;
    data['CategoryId'] = this.categoryId;
    data['Category'] = this.category;
    data['Description'] = this.description;
    if (this.value != null) {
      data['Value'] = value!.map((v) => toJson()).toList();
    }
    data['ServiceResponsePropertyId'] = this.serviceResponsePropertyId;
    data['MappingId'] = this.mappingId;
    data['IsVisible'] = this.isVisible;
    data['PackageRequestId'] = this.packageRequestId;
    data['SortOrder'] = this.sortOrder;
    return data;
  }
}

So I want to achieve results like in the screenshot below:

Leave a Comment