type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'String' using http package

I am trying to fetch data from a link. Here is the link: –
"https://wrestlingworld.co/wp-json/wp/v2/posts?categories=22&quot;

While fetching I get the error. I tried some various ways to do it but can’t find the accurate solution. I am attaching my code, What I tried what I did to solve the issue.

Here is my controller:

class NewsController{
  String url = "https://wrestlingworld.co/wp-json/wp/v2/posts?categories=22";
  Future<List> getNews() async {
    try{
      var response = await http.get(Uri.parse(url));
      if(response.statusCode == 200){
        print(response.body);
        // Map<String, dynamic> resp = json.decode(response.body);
        return json.decode(response.body);
        // return Map<String, dynamic> json.decode(response.body);
      }
      else{
        return Future.error("Error Handling the request");
      }
    } catch(Exception){
      print(Exception);
      return Future.error("Error in the controller");
    }
  }
}

Here is my model:

class NewsModel {
  late int id;
  late String date;
  late String status;
  late String type;
  late String link;
  late String title;
  late String content;

  NewsModel(
      {
        required this.id,
        required this.date,
        required this.status,
        required this.type,
        required this.link,
        required this.title,
        required this.content});

  NewsModel.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    date = json['date'];
    status = json['status'];
    type = json['type'];
    link = json['link'];
    title = json['title'];
    content = json['content'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['date'] = this.date;
    data['status'] = this.status;
    data['type'] = this.type;
    data['link'] = this.link;
    if (this.title != null) {
      data['title'] = this.title;
    }
    if (this.content != null) {
      data['content'] = this.content;
    }
    return data;
  }
}

Here where I am trying to fetch:

FutureBuilder(
  future: newsController.getNews(),
  builder: (context, snapShot) {
    if (snapShot.hasData) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
          child: ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: snapShot.data?.length,
              itemBuilder: (context, item){
                return NewsCard(title: snapShot.data?[item]['title']);
          })
      );
    }
    else {
      return const Center(child: CircularProgressIndicator());
    }
  },
),

While trying to fetch I am getting this error: type ‘_InternalLinkedHashMap<String, dynamic>’ is not a subtype of type ‘String’

Is there any way to solve this issue?

I tried to write the function without using Future it didn’t work at all. So I want to fetch using the same function.

>Solution :

You are making some errors while constructoring data from map. This site helps a lot to viewing full response from http requests.

And in your situation following data class should help:

class YourModel {
  final int id;
  final String date;
  final String status;
  final String type;
  final String link;
  final String title;
  final String content;

  YourModel({
    required this.id,
    required this.date,
    required this.status,
    required this.type,
    required this.link,
    required this.title,
    required this.content,
  });

  factory YourModel.fromJson(Map<String, dynamic> json) {
    return YourModel(
      id: json['id'],
      date: json['date'],
      status: json['status'],
      type: json['type'],
      link: json['link'],
      title: json['title']['rendered'],
      content: json['content']['rendered'],
    );
  }
}

Also try these for your code:

FutureBuilder(
  future: newsController.getNews(),
  builder: (context, snapShot) {
    if (snapShot.hasData) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
          child: ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: snapShot.data?.length,
              itemBuilder: (context, item){
                return NewsCard(title: snapShot.data?[item]['title']['rendered']);
          })
      );
    }
    else {
      return const Center(child: CircularProgressIndicator());
    }
  },
),