api response is perfect but not showing the data in app screen - flutter

Question

I want to fetch data from api and showing on app screen but there nothing on screen but a circular progress indicator. if i try to print response.body on consol it works just fine and showing the body of data in consol but it not showing anything to app screen. weher is the problem of my code???
I try to change itemcount: snapshot.data?.length, but didnt do anything. if i want to print api data on consol it works fine. but not showing to screen.
class _MyHomePageState extends State<MyHomePage> {
List<ApiModel> apiModel = [];
final url = "https://newsapi.org/v2/top-headlines?country=us&category=sports&apiKey=bb66e3f0405944a58cb6853e55995bec";
Future<List<ApiModel>> getData() async {
final response = await http.get(Uri.parse(url));
var data = jsonDecode(response.body.toString());
if (response.statusCode == 200) {
for (Map<String, dynamic> index in data) {
apiModel.add(ApiModel.fromJson(index));
}
return apiModel;
} else {
return apiModel;
}
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: getData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: apiModel.length,
itemBuilder: (context, index){
return Container(
height: 200,
child: Column(
children: [
Text.rich(TextSpan(children: [
TextSpan(text: 'data'),
TextSpan(text: 'data'),
]))
],
),
);
});
}else{
return Center(child: CircularProgressIndicator(),);
}
});
}
}

Answer 1

Your data is not correctly mapped in you ApiModel because you mapping in wrong way so update your getData() with below code.
Future<ApiModel> getData() async {
try {
final response = await http.get(Uri.parse(url));
var data = jsonDecode(response.body.toString());
if (response.statusCode == 200) {
apiResposne = ApiModel.fromJson(data);
return apiResposne;
} else {
return apiResposne;
}
} catch (ex) {
return apiResposne;
}
}
Also you need to update FutureBuilder UI widget part to update data so replace below code.
FutureBuilder(
future: getData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: apiResposne.articles?.length ?? 0,
itemBuilder: (context, index) {
return SizedBox(
height: 200,
child: Column(
children: [
Text.rich(TextSpan(children: [
TextSpan(
text:
(apiResposne.articles?[index].author ?? "")),
TextSpan(
text: (apiResposne.articles?[index].publishedAt ??
"")),
]))
],
),
);
});
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
})