Null check operator used on a null value - inside row->column->text - flutter

Question

i am learnig flutter and here i was trying to use TextOverFLow.elipsis in a Design flow following=> listvie.seprated=> item builder=> Row=> container,Column=>text,text and i got 'Null check operator used on a null value',
ps;'it's my first time asking a que. here so pardon me if i wrote something wrong
import 'dart:convert';
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:sizer/sizer.dart';
import 'news_api_get_res_model.dart';
class NewsHomeScreen extends StatelessWidget {
const NewsHomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder<NewsApiGetResModel>(
future: getNewsData(),
builder: (context, AsyncSnapshot<NewsApiGetResModel> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.separated(
itemCount: snapshot.data!.articles!.length,
itemBuilder: (context, index) {
final data = snapshot.data!.articles![index];
return Padding(
padding: EdgeInsets.symmetric(
horizontal: 5.w,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
data.urlToImage == null
? Container(
height: 30.w,
width: 30.w,
child: Image(
fit: BoxFit.cover,
image: NetworkImage(
'https://i.pinimg.com/564x/0f/37/10/0f37109d0cc005766e5f9e625467d884.jpg')),
)
: Container(
height: 30.w,
width: 30.w,
child: Image(
fit: BoxFit.cover,
image: NetworkImage('${data.urlToImage}'))),
Flexible(
flex: 1,
child: Container(
child: Column(
children: [
Expanded(
child: Text(
"${data.title}",
overflow: TextOverflow.ellipsis,
),
),
Expanded(
child: Text(
"${data.title}",
overflow: TextOverflow.ellipsis,
),
),
],
),
),
)
],
),
);
},
separatorBuilder: (context, index) => Divider(thickness: 2),
);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
),
);
}
}
Future<NewsApiGetResModel> getNewsData() async {
http.Response response = await http.get(Uri.parse(
'https://newsapi.org/v2/everything?q=tesla&from=2022-10-11&sortBy=publishedAt&apiKey=6c5a2cd029a44eb186c8640325bd2901'));
var result = jsonDecode(response.body);
NewsApiGetResModel newsApiGetResModel = NewsApiGetResModel.fromJson(result);
log('${newsApiGetResModel.status}');
return newsApiGetResModel;
}
hi ,i am learning flutter and here i was trying to use TextOverFLow.elipsis in a Design flow following=> listvie.seprated=> item builder=> Row=> container,Column=>text,text and i got 'Null check operator used on a null value',
ps;'it's my first time asking a que. here so pardon me if i wrote something wrong

Answer 1

data is getting null. It is safe to check null first then use !.
return ListView.separated(
itemCount: snapshot.data?.articles?.length,
itemBuilder: (context, index) {
final data = snapshot.data?.articles?[index];
if(data == null) return Text("Got null");
return Padding(
padding: EdgeInsets.symmetric(
More about null-safety