Instance of model in place of data & Model has no getter length Flutter

Question

I am developing an application in Flutter. I am facing an issue with my Future. Data from future in future builder giving error Model has no getter length also it is showing in print as Instance of TopicsModel inspite of data.

Please help.

Below is my code:

topics_model.dart

  class TopicsModel {
  List<Topics> topics = [];

  TopicsModel();

  TopicsModel.fromJson(Map<String, dynamic> jsonMap) {
    try {
      topics = jsonMap['topics'] != null
          ? parseTopicsAttributes(jsonMap['topics'])
          : [];

      print(jsonMap['topics']);
    } catch (e) {
      topics = [];
    }
  }

  static List<Topics> parseTopicsAttributes(attributesJson) {
    List list = attributesJson;
    print("in list making");
    List<Topics> attrList = list.map((data) => Topics.fromJson(data)).toList();
    return attrList;
  }
}

class Topics {
  int id;
  String name;

  Topics.fromJson(Map<String, dynamic> json) {
    print("hash problem");
    print(json);
    id = json["sound_id"];
    name = json["title"];
  }
}

Future

Future<TopicsModel>  getFavTopics() async {
  print("get_only_fav_topics");
  print(userRepo.currentUser.value.userId.toString());
  print(userRepo.currentUser.value.token);
  Uri uri = Helper.getUri('get_only_fav_topics');
  uri = uri.replace(queryParameters: {
    'user_id': userRepo.currentUser.value.userId == null
        ? "0"
        : userRepo.currentUser.value.userId.toString(),
    "app_token": userRepo.currentUser.value.token
  });
  try {
    Map<String, String> headers = {
      'Content-Type': 'application/json; charset=UTF-8',
      'USER': '${GlobalConfiguration().get('api_user')}',
      'KEY': '${GlobalConfiguration().get('api_key')}',
    };
    var response = await http.get(uri, headers: headers);
    if (response.statusCode == 200) {
      var jsonData = json.decode(response.body);
      if (jsonData['status'] == 'success') {
        print("topicssssssssssssssss");
        print(jsonData);
        return (json).decode(response.body)['data'];
      }
    }
  } catch (e) {
    print(e.toString());
  }
}

FutureBuilder in view

child: FutureBuilder<TopicsModel>(
                                  builder: (context, projectSnap) {
                                    print("Projeccct");
                                    print(projectSnap);
                                    if (projectSnap.connectionState ==
                                            ConnectionState.none &&
                                        projectSnap.hasData == null) {
                                      //print('project snapshot data is: ${projectSnap.data}');
                                      return Container();
                                    }
                                    if (projectSnap.connectionState ==
                                            ConnectionState.done &&
                                        projectSnap.hasData) {
                                      print("ind one");
                                      print(projectSnap.data.toString());
                                      return ListView.builder(
                                        scrollDirection: Axis.horizontal,
                                        shrinkWrap: true,
                                        itemCount: projectSnap.data.length,
                                        itemBuilder: (context, index) {
                                          return new ChoiceChip(
                                              pressElevation: 0.0,
                                              selectedColor: settingRepo
                                                  .setting
                                                  .value
                                                  .buttonColor,
                                              selected: false,
                                              backgroundColor: Colors.white,
                                              label: Text(projectSnap
                                                  .data[index].name));
                                        },
                                      );
                                    } else {
                                      return Container();
                                    }
                                  },
                                  future: getFavTopics(),
                                )

Json response:

    {
   "status":"success",
   "data":{
      "topics":[
         {
            "fav_id":1,
            "sound_id":3321,
            "user_id":0,
            "created_at":"2021-05-07 10":"01":25,
            "title":"title 1",
            "sound_name":1620381685.mp3,
            "cat_id":4,
            "parent_id":0,
            "duration":30,
            "album":"Album 1",
            "artist":,
            "tags":null,
            "used_times":0,
            "deleted":0,
            "active":1,
            "image":fLNu9mZDAAHNYJcdNK6YRJPvPVxmpzPidHZRhhW5.jpg
         },
         {
            "fav_id":41,
            "sound_id":3319,
            "user_id":0,
            "created_at":"2021-05-07 09":"58":52,
            "title":"Title 2",
            "sound_name":1620381532.mp3,
            "cat_id":2,
            "parent_id":0,
            "duration":15,
            "album":"Album 1",
            "artist":,
            "tags":null,
            "used_times":0,
            "deleted":0,
            "active":1,
            "image":54PKLMXikjx0KDCHQSL8uep42oXxzF4qtvI7VpHE.jpg
         }
      ]
   }
}

Answer 1

You need generic
Change this
child: FutureBuilder(
to
child: FutureBuilder<List<Topics>>(

Answer 2

You didn't connect the Model class with your FutureBuilder. The data will come from model so call the model class like :

FutureBuilder<Topics>() 

Answer 3

You call your future with Asynchronously

FutureBuilder<List<Topics>>(
       future: getFavTopics(),
       builder: (context, AsyncSnapshot<List<Topics>> projectSnap) {
                                    

For more you can read this article When should I use a FutureBuilder?