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

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"));
                          }
                        }
                    )
                  ],
                ),
              ),
            ),
          ],
        );
      },
    ),
  ),
);