error: Null check operator used on a null value - flutter

Question

In this, when the uniq_id of the button and the uniq_id of the data table match, only then the data of the user of that uniq_id will show.
But this error is coming before the data shows.
Did show the data for one time but after this error came, for both the page
This is my p_team.dart
This is the part of the button that is coming from the Api.
import 'package:flutter/material.dart';
import 'package:practice/listPost/p_team_list.dart';
import 'package:practice/post/post.dart';
import 'package:practice/post/services.dart';
class PTeam extends StatefulWidget {
#override
_PTeamState createState() => _PTeamState();
}
class _PTeamState extends State<PTeam> with SingleTickerProviderStateMixin {
List<Post>? posts;
#override
void initState() {
Services().getPosts().then((list) {
(() {
posts = list;
print(posts);
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
margin: const EdgeInsets.all(20.0),
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(width: 2, color: Colors.greenAccent)),
child: Row(
children: [
Text(
"Total Income:",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic),
),
SizedBox(
width: 10.0,
),
Text(
"Rs.2000",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic),
),
],
),
),
SizedBox(
height: 20.0,
),
Flexible(
child: Container(
child: GridView.count(
childAspectRatio: 1.0,
padding: EdgeInsets.only(left: 16, right: 16),
crossAxisCount: 2,
crossAxisSpacing: 18,
mainAxisSpacing: 18,
children: List.generate(
posts!.length,
(index) => GestureDetector(
onTap: () {
print(posts![index].teamUniqId);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PTeamList(
teamUniqId: posts![index].teamUniqId,
teamType: posts![index].teamType,
)),
);
},
child: Container(
decoration: BoxDecoration(
color: Color(0xff00ffaa),
borderRadius: BorderRadius.circular(10)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(posts![index].teamType,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600)),
),
],
),
),
),
),
),
),
),
],
),
);
}
}
This is my button api's data for p_team.dart.
[{"teamType":"direct team","team_name":"platinum","team_number":"234","team_uniq_id":"1","team_last_update":"10-may-2021"},{"teamType":"left team","team_name":"gold","team_number":"356","team_uniq_id":"2","team_last_update":"10-may-2021"},{"teamType":"right team","team_name":"silver","team_number":"876","team_uniq_id":"3","team_last_update":"10-may-2021"}]
this is my p_team_list.dart.
In this, when the uniq_id of the button and the uniq_id of the data table match, only then the data of the user of that uniq_id will show.
import 'package:flutter/material.dart';
import 'package:practice/listPost/post_list.dart';
import 'package:practice/listPost/services.dart';
class PTeamList extends StatefulWidget {
final teamUniqId;
final teamType;
const PTeamList({Key? key, this.teamUniqId, this.teamType}) : super(key: key);
#override
_PTeamListState createState() => _PTeamListState();
}
class _PTeamListState extends State<PTeamList> {
List<Post>? posts;
#override
void initState() {
Services().getPosts().then((list) {
setState(() {
posts = list;
print("za$posts");
});
});
}
#override
Widget build(BuildContext context) {
// if(widget.teamUniqId==posts.)
return Scaffold(
body:
// Text(widget.teamType),
Flexible(
child: Container(
child: Stack(
children: List.generate(posts!.length, (index) {
if (posts!.length == null) {
print(posts![index].user);
return Center(child: CircularProgressIndicator());
}
else if (widget.teamUniqId == posts![index].teamUniqId) {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
// Data table widget in not scrollable so we have to wrap it in a scroll view when we have a large data set..
child: SingleChildScrollView(
child: DataTable(
columns: [
// DataColumn(
// label: Text('Verified'),
// tooltip: 'represents if user is verified.'),
DataColumn(
label: Text('S No'),
tooltip: 'represents first S no of the user'),
DataColumn(
label: Text('Sponsor ID'),
tooltip: 'represents Sponsor ID of the user'),
DataColumn(
label: Text('User ID'),
tooltip: 'represents User ID of the user'),
DataColumn(
label: Text('Name'),
tooltip: 'represents Name of the user'),
DataColumn(
label: Text('Mobile'),
tooltip: 'represents Mobile of the user'),
DataColumn(
label: Text('Date'),
tooltip: 'represents Date of the user'),
DataColumn(
label: Text('a'),
tooltip: 'represents Date of the user'),
DataColumn(
label: Text('b'),
tooltip: 'represents Date of the user'),
DataColumn(
label: Text('c'),
tooltip: 'represents Date of the user'),
DataColumn(
label: Text('d'),
tooltip: 'represents Date of the user'),
],
rows: posts![index]
.user
.map((data) =>
DataRow(
cells: [
// I want to display a green color icon when user is verified and red when unverified
DataCell(Text(data.userName)),
DataCell(Text(data.userMotherName)),
DataCell(Text(data.userAddress)),
DataCell(Text(data.userSponsorId)),
DataCell(Text(data.sponsorId)),
DataCell(Text(data.email)),
DataCell(Text(data.city)),
DataCell(Text(data.state)),
DataCell(Text(data.userMobile)),
DataCell(Text(data.dob)),
]))
.toList(),
),
),
);
}
return Text("");
}),
),
),
),
);
}
}
This is my data table api's data for p_team.dart.
[{"teamType":"direct Team","team_uniq_id":"1","user":[{"user_name":"deepak","user_mother_name":"Accomodation","user_address":"varanasi","user_mobile":"5678989","user_sponsor_id":"123456","sponsor_id":"3456","email":"abc#gmai.com","city":"varanasi","state":"India","dob":"12-5-1996"},{"user_name":"deepak","user_mother_name":"Accomodation","user_address":"varanasi","user_mobile":"5678989","user_sponsor_id":"123456","sponsor_id":"3456","email":"abc#gmai.com","city":"varanasi","state":"India","dob":"12-5-1996"},{"user_name":"deepak","user_mother_name":"Accomodation","user_address":"varanasi","user_mobile":"5678989","user_sponsor_id":"123456","sponsor_id":"3456","email":"abc#gmai.com","city":"varanasi","state":"India","dob":"12-5-1996"}]},{"teamType":"left Team","team_uniq_id":"2","user":[{"user_name":"Ashu","user_mother_name":"manju","user_address":"Mirzapur","user_mobile":"222222","user_sponsor_id":"123456","sponsor_id":"3456","email":"abc#gmai.com","city":"varanasi","state":"India","dob":"12-5-1996"},{"user_name":"Ashutodh","user_mother_name":"manju1","user_address":"Mirzapur1","user_mobile":"2222221","user_sponsor_id":"1234561","sponsor_id":"34561","email":"abc#gmai.com1","city":"varanasi1","state":"India1","dob":"12-5-19961"}]},{"teamType":"Right Team","team_uniq_id":"3","user":[{"user_name":"tosh","user_mother_name":"snju","user_address":"Allahabad","user_mobile":"44444444","user_sponsor_id":"333456","sponsor_id":"6666666","email":"jkl#gmai.com","city":"lucknow","state":"India","dob":"15-3-1956"}]},{"teamType":"Total Team","team_uniq_id":"4","user":[{"user_name":"tosh","user_mother_name":"snju","user_address":"Allahabad","user_mobile":"44444444","user_sponsor_id":"333456","sponsor_id":"6666666","email":"jkl#gmai.com","city":"lucknow","state":"India","dob":"15-3-1956"},{"user_name":"deepak","user_mother_name":"Accomodation","user_address":"varanasi","user_mobile":"5678989","user_sponsor_id":"123456","sponsor_id":"3456","email":"abc#gmai.com","city":"varanasi","state":"India","dob":"12-5-1996"},{"user_name":"deepak","user_mother_name":"Accomodation","user_address":"varanasi","user_mobile":"5678989","user_sponsor_id":"123456","sponsor_id":"3456","email":"abc#gmai.com","city":"varanasi","state":"India","dob":"12-5-1996"},{"user_name":"tosh","user_mother_name":"snju","user_address":"Allahabad","user_mobile":"44444444","user_sponsor_id":"333456","sponsor_id":"6666666","email":"jkl#gmai.com","city":"lucknow","state":"India","dob":"15-3-1956"}]}]

Answer 1

The cause of this issue is that you're using a bang ! operator on a null value. This indicates that the Object can't be null, and throws an error if so.
You can either add a null check at the start or if the value can be null, it's best to use a nullable ? operator instead.
The error can be easily demonstrated with
int? foo; // nullable var
debugPrint('${foo!}'); // with the ! operator, Flutter expects the value to never be null