I'm showing the data I got from Firestore with SliverStaggeredGrid.countBuilder without any problem. I want to show my data with listview.builder.

My normal code is like this, I wanted to change it to be able to filter.

body: CustomScrollView(
         slivers: [
           StreamBuilder<QuerySnapshot>(
             stream: FirebaseFirestore.instance
                 .collection(widget.title)
                 .orderBy("id", descending: true)
                 .snapshots(),
             builder: (context, dataSnapshot) {
               return !dataSnapshot.hasData
                   ? SliverPadding(
                       sliver: SliverToBoxAdapter(
                         child: ColorLoader(
                           dotOneColor: Colors.white,
                           dotTwoColor: Colors.white,
                           dotThreeColor: Colors.white,
                         ),
                       ),
                       padding: EdgeInsets.all(0),
                     )
                   : SliverPadding(
                       sliver: SliverStaggeredGrid.countBuilder(
                           crossAxisCount: 1,
                           staggeredTileBuilder: (_) => StaggeredTile.fit(1),
                           itemBuilder: (context, index) {
                             DataModel model = DataModel.fromJson(
                                 dataSnapshot.data!.docs[index].data()
                                     as Map<String, dynamic>);
                             return sourceInfo(model, context);
                           },
                           itemCount: dataSnapshot.data!.docs.length),
                       padding: EdgeInsets.all(0),
                     );
             },
           ),
         ],
       ),

When I use my code with listview.builder in sliver, it doesn't show any data on the screen.

body: CustomScrollView(
          slivers: [
            StreamBuilder<QuerySnapshot>(
              stream: FirebaseFirestore.instance
                  .collection('posts')
                  .orderBy("id", descending: true)
                  .snapshots(),
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> dataSnapshot) {
                return !dataSnapshot.hasData
                    ? SliverPadding(
                        sliver: SliverToBoxAdapter(
                          child: ColorLoader(
                            dotOneColor: Colors.white,
                            dotTwoColor: Colors.white,
                            dotThreeColor: Colors.white,
                          ),
                        ),
                        padding: EdgeInsets.all(0),
                      )
                    : ListView.builder(
                        itemCount: dataSnapshot.data!.docs.length,
                        itemBuilder: (context, index) {
                          DataModel model = DataModel.fromJson(
                              dataSnapshot.data!.docs[index].data()
                                  as Map<String, dynamic>);
                          return sourceInfo(model, context);
                        },
                      );
              },
            ),
          ],
        ),

What do I have to do in this situation?

CodePudding user response：

Flutter has two protocols to draw widgets. Sliver and Box protocol. StreamBuilder originally is a StatefulWidget and it uses a Box protocol. Which is something does not work with CustomScrollView.

You can wrap your StreamBuilder with SliverToBoxAdapter to keep it as it is. Also remove the SliverPadding inside the StreamBuilder to have a box protocol widget.

body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: StreamBuilder<QuerySnapshot>(
                stream: FirebaseFirestore.instance
                    .collection('posts')
                    .orderBy("id", descending: true)
                    .snapshots(),
                builder: (BuildContext context,
                    AsyncSnapshot<QuerySnapshot> dataSnapshot) {
                  return !dataSnapshot.hasData
                      ? Padding(
                          child: ColorLoader(
                            dotOneColor: Colors.white,
                            dotTwoColor: Colors.white,
                            dotThreeColor: Colors.white,
                          ),
                          padding: EdgeInsets.all(0),
                        )
                      : ListView.builder(
                          itemCount: dataSnapshot.data!.docs.length,
                          itemBuilder: (context, index) {
                            DataModel model = DataModel.fromJson(
                                dataSnapshot.data!.docs[index].data()
                                    as Map<String, dynamic>);
                            return sourceInfo(model, context);
                          },
                        );
                },
              ),
            ),
          ],
        ),