Flutter: How to show a message if snapshot has no data - flutter

Question

I have a simple problem in flutter but I cant quite figure out how to solve it. So here it is. I'm trying to show a message in my app if the snapshot that I'm calling has no data in my firebase database.
I have this code:
return Scaffold(
body: Container (
child: new LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return Column(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.020,
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
child: Column(
children: <Widget>[
StreamBuilder<QuerySnapshot>(
stream: db.collection('CONFIRMED HELP BENEFICIARY').where('Respondents_ID', isEqualTo: '${widget.UidUser}').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children: snapshot.data.documents
.map((doc) => buildItem(doc))
.toList());
}
else {
return Container(
color: Colors.red,
height: 200,
width: 200,
child: Text("No Data"));
)
],
);
},
),
),
);
Inside my singlescrollview, I have a streambuilder in it. Also an if else. So if the"snapshot.hasdata" I'm showing a list of data and it successfully shows that. But the problem is in the "else". I've been trying to show a container that has a color:red and a text that contains "No Data" but I quite cant figure out how to ## It shows the container for milliseconds then it disappear ##. Please help.

Answer 1

if(!snapshot.hasData){
// still waiting for data to come
return circularProgress();
}
else if(snapshot.hasData && snapshot.data.isEmpty) {
// got data from snapshot but it is empty
return Text("no data");
}
else {
// got data and it is not empty
return ListView(
children: snapshot.data,
);
}
},

Answer 2

This works for me on Flutter 2.10.3 with null safety.
if (!snapshot.hasData) {
// waiting for data
return CircularProgressIndicator();
} else if (snapshot.data?.size == 0) {
// collection has no data
return _noDataWidget();
} else {
return ...;
}

Answer 3

There was a few brackets missing. That caused the problem. I fixed the code for you.
return Scaffold(
body: Container(
child: new LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return Column(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).size.height * 0.020,
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
child: Column(
children: <Widget>[
StreamBuilder<QuerySnapshot>(
stream: db.collection('CONFIRMED HELP BENEFICIARY')
.where('Respondents_ID', isEqualTo: '${widget.UidUser}')
.snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Column(
children: snapshot.data.documents
.map((doc) => buildItem(doc))
.toList());
}
else {
return Container(
color: Colors.red,
height: 200,
width: 200,
child: Text("No Data"));
}
}
)
],
),
),
),
],
);
},
),
),
);

Answer 4

if(!snapshot.hasData){
return circularProgress();
}
else if(snapshot.data.docs.isEmpty){
return Text("There is no data here");
//Or you can show any widget you want
}else{
return ListView()
}