Flutter webapp: Snapshort returns a null value

Question

I am new to flutter and have been trying to retrieve data from firebase and display but its snapshot is null. I have gone through similar questions raised by other users, but nothing working.

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    leading: BackButton(
      color: Colors.white,
    ),
    bottomOpacity: 1.0,
    backgroundColor: mucolor1,
    title: Text(
      "Customer receipt ",
      style: TextStyle(color: Colors.white, fontSize: 12),
    ),
  ),
  body: Stack(
    clipBehavior: Clip.none,
    alignment: Alignment.topCenter,
    children: [
      Container(
        child: StreamBuilder(
          stream: FirebaseFirestore.instance
              .collection("users")
              .doc(tableNo)
              .collection("order")
              .snapshots(),
          builder: (BuildContext context,
              AsyncSnapshot<QuerySnapshot> snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting)
              return new Center(child: new CircularProgressIndicator());

            if(snapshot.data!=null){
              return Container(
                margin: EdgeInsets.fromLTRB(20, 100, 20, 0),
                child: ListView(
                  children: snapshot.data.docs.map((document) {
                    return Container(
                        color: Colors.white54,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Card(
                              elevation: 0,
                              child: Container(
                                padding: EdgeInsets.all(10),
                                child: Row(
                                  mainAxisAlignment:
                                  MainAxisAlignment.spaceAround,
                                  children: [
                                    Text("Tsh " +
                                        document.get("price").toString() +
                                        "/="),
                                    Text(document.get("qty").toString()),
                                    Text(document.get("title")),


                                  ],
                                ),
                              ),
                            )
                          ],
                        ));
                  }).toList(),
                ),
              );
            }else {
              return Positioned(
                top: 80,
                child: Center(
                    child: Container(
                        margin: EdgeInsets.fromLTRB(20, 10, 20, 0),
                        child: Text("No data"))),
              );
            }

          },
        ),
      ),
      Positioned(
        top: 10,
        child: Center(
            child: Container(
                margin: EdgeInsets.fromLTRB(20, 10, 20, 0),
                child: Text("Your Order"))),
      ),
      Positioned(
          top: 50,
          child: Container(
              margin: EdgeInsets.fromLTRB(20, 10, 20, 0),
              child: Text(
                "Total Cost Tsh " + grandTotal + "/=",
                style:
                    TextStyle(color: mucolor2, fontWeight: FontWeight.bold),
              ))),
    ],
  ),
);

} }

Here is my database structure:

Kindly I need your help. I have been struggling to solve this problem for a month now.

Answer 1

I replace firebase SDK js version 8.2.1 to 7.22.1 and it works.

Before replacement.

SDK 8.2.1

  <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

  <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>

SDK 7.22.1

  <script src="https://www.gstatic.com/firebasejs/7.22.1/firebase-app.js"></script>

  <script src="https://www.gstatic.com/firebasejs/7.22.1/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.22.1/firebase-analytics.js"></script>

and it works now.