Home > Back-end >  Why StreamBuilder always has no data before hot reload?
Why StreamBuilder always has no data before hot reload?

Time:11-23

I use firestore and streambuilder to read data in a list, when i run the application for the first time i get a message "Unexpected null value" and I realized that "snapshot.hasData" is always false and snapshot.ConnectionState.waiting is always true. But when i restart application with hot reload i can retrieve data.

This is my stream:

Stream<QuerySnapshot> _branchStream = FirebaseFirestore.instance.collection('Companies').doc(company_id).collection("Branch Offices").snapshots();

This is my StreamBuilder

StreamBuilder<QuerySnapshot>(
                              stream: _branchStream,
                              builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                               /* if (snapshot.hasError) {
                                  return const Text('Something went wrong');
                                }

                                if (snapshot.connectionState == ConnectionState.waiting) {
                                  return const Text("Loading");
                                }*/

                                return ListView(
                                  children: snapshot.data!.docs
                                      .map((DocumentSnapshot document) {
                                    Map<String, dynamic> data =
                                    document.data()! as Map<String, dynamic>;
                                    return Padding(
                                      padding: const EdgeInsets.all(22.0),
                                      child: Card(
                                        elevation: 8,
                                        shadowColor: Colors.blueGrey,
                                        shape: cardShape,
                                        child: Row(
                                          children: [
                                            Expanded(
                                                flex: 2,
                                                child:  Padding(
                                                  padding: const EdgeInsets.all(22.0),
                                                  child: CircleAvatar(
                                                    radius: 50,
                                                    backgroundImage:
                                                    NetworkImage(data['branch_image'],scale: 60),
                                                  ),
                                                )),
                                            Expanded(
                                                flex: 4,
                                                child: Column(
                                                  mainAxisAlignment: MainAxisAlignment.center,
                                                  crossAxisAlignment: CrossAxisAlignment.start,
                                                  children: [
                                                    Padding(
                                                      padding: const EdgeInsets.all(22.0),
                                                      child: Text(data['branch_name'], style: textBlackTitle, textAlign: TextAlign.center,),
                                                    ),
                                                    Padding(
                                                      padding: const EdgeInsets.all(22.0),
                                                      child: Text("Ubicación: " data['branch_address'], style: textGraySubTitle, textAlign: TextAlign.center,),
                                                    ),
                                                  ],
                                                )),
                                            Expanded(
                                                flex: 2,
                                                child: IconButton(
                                                  // focusColor: Color(color1),
                                                  //  color: Color(color1),
                                                    onPressed: (){

                                                      Navigator.push(context, MaterialPageRoute(builder: (context) => Home(branch_id : data['branch_id'], company_id : company_id, branch_name : data['branch_name'], branch_image : data['branch_image'])));

                                                    }, icon: Image.asset("assets/enter.png", fit: BoxFit.contain, height: 100,)))
                                          ],
                                        ),

                                      ),
                                    );
                                  })
                                      .toList()
                                      .cast(),
                                );
                              },
                            )

This is data that I want to get

enter image description here

This is what I get at the first time

enter image description here

This is what I get after hot reload (That I should have from the beginning).

enter image description here

CodePudding user response:

Because your data is null at the beginning, it takes some time to load the data.

You actually already included a check, but commented it out again. Undo it and try again.

 /* if (snapshot.hasError) {
                                  return const Text('Something went wrong');
                                }

                                if (snapshot.connectionState == ConnectionState.waiting) {
                                  return const Text("Loading");
                                }*/

CodePudding user response:

It takes some time to load snapshot data. For better UX return specific widgets for each state of the snapshot. Make sure you're using StreamBuilder inside StatefulWidget.

StreamBuilder<QuerySnapshot>(
          stream: _branchStream,
          builder: (BuildContext context, snapshot) {
            if (snapshot.hasError) {
             return //error widget
            } else {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return //some widget
                  
                case ConnectionState.waiting:
                     return CircularProgressIndicator(),
    
                case ConnectionState.active:
                 return ListView()
  
                case ConnectionState.done:
                 return //some widget
              }
            }
);
  • Related