Listview with images list not populating Flutter - json

Question

I want to show images from Json into list. I do not know why it is not parsing images correctly. I am trying to get image from nested list but always it shows error of type list is not type of list.
https://imgur.com/AVGNSdl
My Json is like this
[
{
"PhoneNo": "030780229",
"VehicleNo": "1838",
"Features": "1111",
"Category": "Sedan",
"carsalingImage": [
{
"PhoneNo": "030780229",
"VehicleNo": "1838",
"ImageURL": "data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBsRXhpZgAASUkqAAgAAAADADEBAgAHAAAA",
"Id": 0
},
{
"PhoneNo": "030780229",
"VehicleNo": "1838",
"ImageURL": "data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBsRXhpZgAASUkqAAgAAAADADEBAgAHAAAA",
"Id": 0
}
]
My build function is
Uint8List _bytesImage;
List<CarSaleImage> userList;
Widget build(BuildContext context) {
return FutureBuilder<List<CarModel>>(
future: _fetchNewVehicles(),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<CarModel> data = snapshot.data;
return _showlistView(data);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
},
);
}
Future<List<CarModel>> _fetchNewVehicles() async {
final response = await http.get(uri);
print(uri);
if (response.statusCode == 200) {
// setState(() {
List jsonResponse = json.decode(response.body);
//
userList = (jsonResponse[0]['carsalingImage'])
.map((itemWord) => CarSaleImage.fromJson(itemWord))
.toList();
print(userList.length);
//
return jsonResponse.map((c) => new CarModel.fromJson(c)).toList();
// });
} else {
throw Exception('Failed to load data from API');
}
}
ListView _showlistView(data) {
return ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (context, index) {
return _itemBuilder(
context,
index,
data[index].manufacturerName ??
'' + "Model: " + data[index].model ??
'' + "year: " + data[index].year + '');
});
}
Widget _itemBuilder(BuildContext context, int index, String texts) {
return InkWell(
child: Card(
child: Column(children: <Widget>[
SizedBox(
height: 200.0,
child: ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: userList.length,
itemBuilder: (BuildContext context, int index) => Card(
child: Container(
width: MediaQuery.of(context).size.width - 40,
child: Center(
child: Image(
image:
returnImg(userList[index].imageUrl.toString())
.image))),
),
),
),
Text(
'Demo Headline 2',
),
Container(
height: 50,
child: Text(
"${texts}",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.orange,
),
),
),
])),
onTap: () {
print(texts);
});
}
Image returnImg(String bytesData) {
_bytesImage = base64.decode(bytesData.split(',').last);
return Image.memory(_bytesImage);
}
My Model classes are
CarModel carVecFromJson(String str) => CarModel.fromJson(json.decode(str));
String carVecToJson(CarModel data) => json.encode(data.toJson());
class CarModel {
CarModel({
this.phoneNo,
this.vehicleNo,
this.features,
this.category,
this.carsalingImage,
});
String phoneNo;
String vehicleNo;
String features;
String category;
List<CarSaleImage> carsalingImage;
factory CarModel.fromJson(Map<String, dynamic> json) => CarModel(
phoneNo: json["PhoneNo"],
vehicleNo: json["VehicleNo"],
features: json["Features"],
category: json["Category"],
carsalingImage: List<CarSaleImage>.from(
json["carsalingImage"].map((x) => CarSaleImage.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"PhoneNo": phoneNo,
"VehicleNo": vehicleNo,
"Features": features,
"Category": category,
"carsalingImage":
List<dynamic>.from(carsalingImage.map((x) => x.toJson())),
};
}
class CarSaleImage {
CarSaleImage({
this.phoneNo,
this.vehicleNo,
this.imageUrl,
this.id,
});
String phoneNo;
String vehicleNo;
String imageUrl;
int id;
factory CarSaleImage.fromJson(Map<String, dynamic> json) => CarSaleImage(
phoneNo: json["PhoneNo"],
vehicleNo: json["VehicleNo"],
imageUrl: json["ImageURL"],
id: json["Id"],
);
Map<String, dynamic> toJson() => {
"PhoneNo": phoneNo,
"VehicleNo": vehicleNo,
"ImageURL": imageUrl,
"Id": id,
};
}
How to resolve this issue. Any help ?

Answer 1

Please update CarModel and try again.
factory CarModel.fromJson(Map<String, dynamic> json) => CarModel(
phoneNo: json["PhoneNo"],
vehicleNo: json["VehicleNo"],
features: json["Features"],
category: json["Category"],
carsalingImage:
json["carsalingImage"].map((x) => CarSaleImage.fromJson(x)).toList(),
);
Map<String, dynamic> toJson() => {
"PhoneNo": phoneNo,
"VehicleNo": vehicleNo,
"Features": features,
"Category": category,
"carsalingImage": carsalingImage.map((x) => x.toJson()).toList(),
};