White space between gridview.Builder items

Question

My gridView.Builder has a blank space between the inexplicable lines, I’ve reviewed all the code and there is no widget with this margin or padding.

Is Gridview coming with auto space? If so, how do I remove it?

My gridView:

listViewBuilderCategoriasFirebase(){
    return StreamBuilder(
      stream: FirebaseFirestore.instance
          .collection("InfoApp")
          .doc("DadosApp")
          .collection("categorias")
          .orderBy("posicao", descending: false)
          .snapshots(),
      builder: (context, snapshot){

        switch(snapshot.connectionState) {
          case ConnectionState.none:
          case ConnectionState.waiting:
            //return carregandoDados;
            break;
          case ConnectionState.active:
          case ConnectionState.done:
            QuerySnapshot querySnapshot = snapshot.data;

            if(querySnapshot.docs.length == 0){
              return Container(
                padding: EdgeInsets.all(25),
                child: Center(
                  child: Text("Nenhuma categoria disponível!",
                    style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold
                    ),),
                ),
              );
            }

            return GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 0,
                crossAxisSpacing: 0,
              ),
              itemCount: querySnapshot.docs.length,
              padding: EdgeInsets.all(0),
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, indice){

                return GestureDetector(
                    onTap: (){
                      //push(context, w);
                      print("");
                    },
                    child: Text("a")
                );

              },
            );

        }
        return Container();
      },
    );
  }

Answer 1

The constructor used by you assumes a aspect ratio of 1.0 for each child widget GridView. - That is, a ratio of one square - that can be seen in the documentation here. This is a feature of this widget, to ensure consistency between the children widgets and the calculation of size and constraints.

I mean, you have to decide how many simultaneous lines should appear in your Gridview, and with this value calculate the aspect ratio.

An example, suppose you want the screen to fit 5 rows of items, and 2 columns:

    var tamanhoDaTela= MediaQuery.of(context).size;

    /*24 é a barra de notificação no android*/
    final double alturaDeCadaItem = (tamanhoDaTela.height - kToolbarHeight - 24) / 5;
    final double larguraDeCadaItem = tamanhoDaTela.width / 2;
    final double razaoDeAspecto = larguraDeCadaItem / alturaDeCadaItem ;

And in the end use on the property childAspectRatio of the Delegate used by you:

SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 0,
                crossAxisSpacing: 0,
                childAspectRatio: razaoDeAspecto,
              ),

You can read more on this reply (in English).