How to mock a Stream builder inside a ChangeNotifier Class?

Question

I have been using StreamBuilders on each page of the app I am developing. The problem I am facing is the lag it causes while switching screens. I understand that stream automatically reads any changes made in the firebase and changes UI accordingly. I wanted to implement a Observer Pattern, where all the information is(the streamBuilders are) at one place inside the ChangeNotifier class. And when there is any change to the stream, I can call notifyListeners Functions to change UI at all places.

The issue is, I cannot find any example of code anywhere which resembles this. I have trying bringing the whole streamBuilder as is inside the class, but it is supposed to return a widget and this setup does not work. I can share my original code, can someone give an example of how I can use a StreamBulder or just a Stream method to get all this info?

The userDetails is a List<Map<String, dynamic>> that I am trying to get at one central point (inside the change notifier class).

Code of my current StreamBuilder (Not inside the ChangeNotifier class)

 StreamBuilder<QuerySnapshot>(
                stream: documentStream,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    documentIDs = [];
                    userDetails = [];
                    var users = snapshot.data?.docs.toList();
                    if (searchText.isNotEmpty) {
                      users = users!.where((element) {
                        return element
                            .get('name')
                            .toString()
                            .toLowerCase()
                            .contains(searchText.toLowerCase());
                      }).toList();
                      for (var user in users) {
                        var data = user.data();
                        userDetails.add(data as Map<String, dynamic>);
                      }
                      if (userDetails.isEmpty) {
                        return Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Center(
                              child: Text(
                                'No results Found!',
                                style: TextStyle(
                                  color: Colors.purpleAccent,
                                  fontSize: 45.sp,
                                ),
                                textAlign: TextAlign.center,
                              ),
                            ),
                          ],
                        );
                      }
                    } else {
                      for (var user in users!) {
                        var data = user.data();
                        userDetails.add(data as Map<String, dynamic>);
                      }
                    }
                  }```

The builder also returns a Expanded widget which has a child Listview Builder. This listview builder is where the **userDetails** gotten from the firebase is used. The code also contains a **searchText** which is used for the search bar to filer the tiles created by the listview builder, *you can safely ignore that*, the** else** part of the code is what the primary objective is.

How to mock a Stream builder inside a ChangeNotifier Class?

0 Answers0