Instance of model in place of data & Model has no getter length Flutter - 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 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?

Answer 3

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