Flutter How to display JSON response on Listview - flutter

Question

I want to display JSON data on Listview when I do button click, I can print valid JSON data on console so I want a way to show it on a listview, I am still a beginner in Flutter, your help will be appreaciated.
My model class
class Vehicle {
int? id;
int? sourceId;
int? serviceId;
int? categoryId;
String? category;
String? description;
dynamic value;
int? serviceResponsePropertyId;
int? mappingId;
bool? isVisible;
int? packageRequestId;
int? sortOrder;
Vehicle(
{required this.id,
required this.sourceId,
required this.serviceId,
required this.categoryId,
required this.category,
required this.description,
required this.value,
required this.serviceResponsePropertyId,
required this.mappingId,
required this.isVisible,
required this.packageRequestId,
required 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'];
value = json['Value'];
serviceResponsePropertyId = json['ServiceResponsePropertyId'];
mappingId = json['MappingId'];
isVisible = json['IsVisible'];
packageRequestId = json['PackageRequestId'];
sortOrder = json['SortOrder'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = {};
data['Id'] = id;
data['SourceId'] = sourceId;
data['ServiceId'] = serviceId;
data['CategoryId'] = categoryId;
data['Category'] = category;
data['Description'] = description;
data['Value'] = value;
data['ServiceResponsePropertyId'] = serviceResponsePropertyId;
data['MappingId'] = mappingId;
data['IsVisible'] = isVisible;
data['PackageRequestId'] = packageRequestId;
data['SortOrder'] = sortOrder;
return data;
}
}
JSON response
[
{
"Id": 0,
"SourceId": 0,
"ServiceId": 11,
"CategoryId": 5,
"Category": "Valuation",
"Description": "AdjustedValues",
"Value": [],
"ServiceResponsePropertyId": 474,
"MappingId": 0,
"IsVisible": true,
"PackageRequestId": 13870410,
"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": 13870410,
"SortOrder": 1
},
{
"Id": 0,
"SourceId": 0,
"ServiceId": 6,
"CategoryId": 1,
"Category": "General",
"Description": "CarId",
"Value": 120354,
"ServiceResponsePropertyId": 100,
"MappingId": 0,
"IsVisible": false,
"PackageRequestId": 13870410,
"SortOrder": 1
},
{
"Id": 0,
"SourceId": 0,
"ServiceId": 6,
"CategoryId": 1,
"Category": "General",
"Description": "Year",
"Value": 2017,
"ServiceResponsePropertyId": 103,
"MappingId": 0,
"IsVisible": true,
"PackageRequestId": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"SortOrder": 1
},
{
"Id": 0,
"SourceId": 0,
"ServiceId": 6,
"CategoryId": 1,
"Category": "General",
"Description": "Make",
"Value": "AUDI",
"ServiceResponsePropertyId": 110,
"MappingId": 0,
"IsVisible": true,
"PackageRequestId": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"SortOrder": 9999
},
{
"Id": 0,
"SourceId": 0,
"ServiceId": 12,
"CategoryId": 5,
"Category": "Valuation",
"Description": "LastFiveSales",
"Value": [
{
"SaleId": 701436,
"CarId": 120354,
"SaleYear": 2017,
"SaleDateTime": "2022-06-24T14:09:04Z",
"SalePrice": 289900.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": 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
}
],
"ServiceResponsePropertyId": 481,
"MappingId": 0,
"IsVisible": true,
"PackageRequestId": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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": 13870410,
"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/f1a817b0-6b13-479a-b667-19d4ecd65a65.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/f1a817b0-6b13-479a-b667-19d4ecd65a65.html",
"ServiceResponsePropertyId": 0,
"MappingId": 0,
"IsVisible": false,
"PackageRequestId": 0,
"SortOrder": 0
}
]
I want to only show certain items in the list,which are in "Value" like model, year, model etc..
My API function
Future<List<Vehicle>?> signInData() async {
final prefs = await SharedPreferences.getInstance();
final String? token = prefs.getString('token');
try {
Response response = await _dio.post('$_baseUrl/api/gateway',
data: {
"ClientPackageId": "0cdd231a-d7ad-4a68-a934-d373affb5100",
"PlatformId": "ios",
"ClientUserId": "AhmedOmar",
"VinNumber": VINumber
},
options: Options(
headers: {
"Content-Type": "application/json;charset=UTF-8",
"Charset": 'utf-8',
"Authorization": "Bearer $token",
},
));
print("data is here");
print(json.encode(response.data));
print(response.statusCode);
if (response.statusCode == 200) {
print("decoded");
final parsedJson = json.decode(json.encode(response.data));
print(
List<Vehicle>.from(parsedJson.map((job) => Vehicle.fromJson(job))));
return List<Vehicle>.from(
parsedJson.map((job) => Vehicle.fromJson(job)));
} else if (response.statusCode == 500) {
// call your refresh token api here and save it in shared preference
print(response.statusCode);
await getToken();
signInData();
} else {
throw Exception('Failed to load data');
}
} catch (e) {
print(e);
}
}
void showSnackBar(BuildContext context, String text) {
final snackBar = SnackBar(
content: Text(text),
duration: const Duration(seconds: 3), //default is 4s
);
// Find the Scaffold in the widget tree and use it to show a SnackBar.
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
}
The results I want to achieve is below, shown in a picture

Answer 1

You can do something like this : List<Vehicle> _vehicleList;
instead of return statement write :
_vehicleList = List<Vehicle>.from(
parsedJson.map((job) => Vehicle.fromJson(job)));
and then after setState((){});
and I hope that you have ListView is available inside Build method
ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text($_vehicleList[index].category),
Text($_vehicleList[index].value),
],
);
},
itemCount: _vehicleList.length)