i can't get all the data from an api - flutter

Question

i want to display some data that i receive from a web Api in the form of posts, most of that data gets displayed on the screen normally but all of a sudden an error arises and all the remaining posts become red.
the error i get:
The following NoSuchMethodError was thrown building:
The method '[]' was called on null.
Receiver: null
Tried calling: [](0)
When the exception was thrown, this was the stack
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1 _NewsScreenState.build.<anonymous closure>.<anonymous closure>
#2 SliverChildBuilderDelegate.build
package:flutter/…/widgets/sliver.dart:449
#3 SliverMultiBoxAdaptorElement._build
package:flutter/…/widgets/sliver.dart:1130
#4 SliverMultiBoxAdaptorElement.performRebuild.processElement
package:flutter/…/widgets/sliver.dart:1076
the way how i display the posts:
import 'package:flutter/material.dart';
class NewsFrame extends StatelessWidget {
final String title;
final String excerpt;
final String webUrl;
final String imageUrl;
final String publishedDateTime;
final String sourceName;
const NewsFrame(
{this.title,
this.excerpt,
this.webUrl,
this.imageUrl,
this.publishedDateTime,
this.sourceName});
String formatTime(String receivedDate) {
String date = receivedDate.substring(0, 11);
return "${date.substring(0, 4)}/${date.substring(5, 7)}/${date.substring(8, date.length-1)}";
}
void delayedMomemt() async {
await Future.delayed(Duration(milliseconds: 200));
print(this.title);
print(this.excerpt);
print(this.webUrl);
print(this.publishedDateTime);
print(this.imageUrl);
print(this.sourceName);
}
#override
Widget build(BuildContext context) {
this.delayedMomemt();
return Container(
decoration: BoxDecoration(color: Colors.green),
padding: const EdgeInsets.all(8),
margin: const EdgeInsets.all(8),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(this.title),
this.imageUrl == null
? SizedBox(height: 0)
: Image.network(this.imageUrl),
Text(this.excerpt),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(this.publishedDateTime == null
? "No Date"
: this.formatTime(this.publishedDateTime)),
Text(this.sourceName ?? "Unknown")
],
)
],
),
);
}
}
how i send the data to the posts file:
class NewsScreen extends StatefulWidget {
#override
_NewsScreenState createState() => _NewsScreenState();
}
class _NewsScreenState extends State<NewsScreen> {
var articalsData;
#override
void initState() {
super.initState();
GetData getData = GetData();
this.articalsData = getData.getArticals();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: ThmColors.lightBlueClr,
body: Stack(
children: [
FadedBg(img: "img21"),
Center(
child: FutureBuilder(
future: this.articalsData,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children: [
SizedBox(height: MediaQuery.of(context).size.height / 6),
Expanded(
child: ListView.builder(
itemCount: snapshot.data['news'].length,
itemBuilder: (context, index) => NewsFrame(
title: snapshot.data['news'][index]['title'],
excerpt: snapshot.data['news'][index]['excerpt'],
webUrl: snapshot.data['news'][index]['webUrl'],
imageUrl: snapshot.data['news'][index]['images'][0]['url'],
publishedDateTime: snapshot.data['news'][index]['publishedDateTime'],
sourceName: snapshot.data['news'][index]['provider']['name'],
),
),
),
],
);
} else if (snapshot.hasError) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Oops! something went wrong.',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
)),
Text('(Check out your: Signal, Internet, WiFi...)',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
letterSpacing: -0.5)),
],
);
}
return LoadingRing();
},
),
),
Positioned(
top: 0,
child: UpperBar(titleTxt: "News"),
),
],
),
);
}
}
PLEASE HELP!

Answer 1

It looks like not every article has an images array, try checking if its null before getting the first image, if it is provide some sort of default image instead. Something like this:
imageUrl: getImage(snapshot.data['news'][index])
...
String getImage(data){
if (data['images'] == null || data['images'].isEmpty)
return 'default_image_url'
return data['images'][0]['url']
}