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

CodePudding user response：

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)),