The method 'map' was called on null on a nullable value - json

Question

So basically it is a comment box that comes with or without an image. So the img url is nullable. I am trying to deserialize it.
Here is the Comment Model.
// To parse this JSON data, do
//
// final productComment = productCommentFromJson(jsonString);
import 'package:meta/meta.dart';
import 'dart:convert';
ProductComment productCommentFromJson(String str) =>
ProductComment.fromJson(json.decode(str));
String productCommentToJson(ProductComment data) => json.encode(data.toJson());
class ProductComment {
const ProductComment({
this.id,
this.comment,
this.owner,
this.productId,
this.imgsUrl,
this.imgsName,
this.createdAt,
});
final int? id;
final String? comment;
final String? owner;
final int? productId;
final List<String>? imgsUrl;
final List<String>? imgsName;
final DateTime? createdAt;
factory ProductComment.fromJson(Map<String, dynamic> json) => ProductComment(
id: json["id"],
comment: json["comment"],
owner: json["owner"],
productId: json["product_id"],
// imgsUrl: List<String>.from(json["imgs_url"].map((x) => x)),
imgsUrl: json["imgs_url"] == null
? null
: List<String>.from(json["imgs_url"].map((x) => x)),
imgsName: List<String>.from(json["imgs_name"].map((x) => x)),
createdAt: DateTime.parse(json["created_at"]),
);
Map<String, dynamic> toJson() => {
"id": id,
"comment": comment,
"owner": owner,
"product_id": productId,
"imgs_name": List<dynamic>.from(imgsName!.map((x) => x)),
// "imgs_url": List<dynamic>.from(imgsUrl!.map((x) => x)),
"imgs_url":
imgsUrl == null ? null : List<dynamic>.from(imgsUrl!.map((x) => x)),
"created_at": createdAt!.toIso8601String(),
};
}
I am trying to decode the imgs_url wether it has an image or not.
Wrap(
children: <Widget>[
Card(
margin: const EdgeInsets.all(8),
child: Container(
decoration: const BoxDecoration(
color: Color.fromARGB(255, 221, 217, 217),
borderRadius: BorderRadius.all(Radius.circular(10))),
padding:
const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: Isize().borderRadius),
child: Text(
widget.comment,
overflow: flag ? TextOverflow.ellipsis : null,
style: const TextStyle(
fontSize: 15,
),
),
),
InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
flag ? "show more" : "show less",
style: const TextStyle(
color: lilac, fontFamily: 'FiraCode'),
),
],
),
onTap: () {
setState(() {
flag = !flag;
});
},
),
Builder(builder: (context) {
if (widget.image!.isNotEmpty) {
return Container();
}
return SizedBox(
height: 100,
child: GridView.count(
mainAxisSpacing: 1,
crossAxisSpacing: 1,
crossAxisCount: 6,
children:
List.generate(widget.image!.length, (index) {
return Center(
child: CachedNetworkImage(
memCacheHeight: 20,
memCacheWidth: 20,
imageUrl: widget.image![index]!,
imageBuilder: (context, imageProvider) =>
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
borderRadius: Isize().borderRadius,
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
colorFilter: const ColorFilter.mode(
Colors.black45,
BlendMode.darken,
),
),
),
),
placeholder: (context, url) => Center(
child: Image.asset(IhIcon().ihemyilogo),
),
errorWidget: (context, url, error) =>
const Icon(
Icons.error,
color: Colors.deepOrangeAccent,
),
),
);
}),
));
})
],
)),
),
],
);
For the repository which also has a map:
Future<List<ProductComment>> productCommentsByID(int productID) async {
final uri = Uri.parse('${ep.mainUrl}/api/v1/products/comments/$productID');
debugPrint('Comments by Product ID = $uri');
final response = await http.get(uri);
if (response.statusCode == 200) {
if (response.body.isNotEmpty) {
final comments = List<ProductComment>.from(
json.decode(response.body).map(
(data) => ProductComment.fromJson(data),
),
);
debugPrint('Fucker says hello ${comments.toString()}');
return comments;
} else {
throw ErrorEmptyResponse();
}
} else {
throw ErrorGettingGames(
'Error getting Comments With Product ID $productID');
}
}
Please i need help.I cant understand which of the maps that has the issue. I just get this error:
I/flutter ( 3603): Transition { currentState: CommentState([], Instance of 'ProductComment', 0, CommentStatus.error), event: CommentsByProductID(1), nextState: CommentError(NoSuchMethodError: The method 'map' was called on null.
I/flutter ( 3603): Receiver: null

Answer 1

I think your imgsName may be null too, try change this:
imgsName: List<String>.from(json["imgs_name"].map((x) => x)),
to this:
imgsName: json["imgs_name"] == null? null: List<String>.from(json["imgs_name"].map((x) => x)),