I need help regarding my gridview.builder, my gridview become like this , this happened because I want to filter to show only item that has the same id. I already try to put padding: EdgetInsets.zeroand SizedBox.shrink but it still does not work. Here is my code

Stack(
        children: [
          StreamBuilder(
              stream: FirebaseFirestore.instance.collection('products').snapshots(),
              builder: (context, AsyncSnapshot<QuerySnapshot> snapshot){
                if(snapshot.hasError){
                  return Text("Error: ${snapshot.error}");
                }
                if(snapshot.hasData){
                  return Column(
                    children: [
                      Flexible(
                          child: GridView.builder(
                              padding: EdgeInsets.zero,
                              itemCount: snapshot.data!.docs.length,
                              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 2,
                                mainAxisSpacing: 15,
                                crossAxisSpacing: 15,
                                childAspectRatio: 2/3,
                              ),
                              itemBuilder: (context, index){
                                final DocumentSnapshot documentSnapshot =
                                snapshot.data!.docs[index];
                                DateTime dt = (documentSnapshot['endDateTime'] as Timestamp).toDate();
                                if(documentSnapshot['userid'] == widget.sellerId){
                                  print(documentSnapshot['userid']);
                                  return  buildImageCard(
                                      documentSnapshot['imageURL'][0], documentSnapshot['nameP'],
                                      documentSnapshot['startPrice'], dt, documentSnapshot['id'],
                                      documentSnapshot['categoryP']);
                                }
                                return SizedBox.shrink();
                              }
    
                          )
                      ),
                    ],
                  );
                }
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
    
    
          ),
        ],
      );

CodePudding user response：

The solution would be to filter the list of docs above the widget, and use the filtered list for itemCount and the builder.

The cause of the issue is that each widget takes the aspect ratio that your specified (2/3) the spacing regardless of the size of the child widget.

So it should be a little something like this

if(snapshot.hasData){
final listToUse = snapshot.data?.docs.where((documentSnapshot) => documentSnapshot['userid'] == widget.sellerId).toList() ?? [];
return Column(...

CodePudding user response：

Instead of using GridView use Wrap

Wrap(
  children: List.generate(snapshot.data!.docs.where(element)=> element['userid'] == widget.sellerid).toList().length, (index){
  return buildImageCard(
        documentSnapshot['imageURL'][0],
        documentSnapshot['nameP'],
        documentSnapshot['startPrice'], dt,
        documentSnapshot['id'],                     
        documentSnapshot['categoryP']);
    ),

   }
)