Flutter remove space between GridView row

Issue

I am trying to create a gridview of raised buttons but there is a large amount of space between the rows of of the grid like this picture:

I am implementing the GridView with the code at the bottom of the page:

As you can see I set:

SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150, mainAxisSpacing: 4, crossAxisSpacing: 4), 

I would have expected that setting the main axis spacing and cross axis spacing should remove those spaces.

I also tried returning the gridview in a sized box and changing it to SliverGridWithFixedCount, but nothing seems to be changing it.

I am not sure what I have done incorrectly in the layout?

Thanks for your help

body: Column(
        children: <Widget>[
          Flexible(
            child: filtersGridView(),
          ),
        ],
      ),
    );
  }
}


class filtersGridView extends StatefulWidget {
  @override
  _filtersGridViewState createState() => _filtersGridViewState();
}

class _filtersGridViewState extends State<filtersGridView> {

  final List <DocumentSnapshot> documents;
  _filtersGridViewState({this.documents});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: Firestore.instance.collection('categories').snapshots(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
          return Center(child: const Text('Loading events...'));
        }
        return GridView.builder(
          gridDelegate:
          SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 150, mainAxisSpacing: 4, crossAxisSpacing: 4),
          itemBuilder: (BuildContext context, int index) {
            return Column(children: <Widget>[
              InkWell(
                onTap: () {

                },
                child: SizedBox(
                  height: 30,
                  child: RaisedButton(
                    color: Colors.white,
                    child: Row(
                      children: <Widget>[
                        Text(snapshot.data.documents[index]['name'].toString(), textAlign: TextAlign.center, style: TextStyle(fontSize:  15, color: Colors.black,),),
                         ],
                    ),

Solution

If you are concerned about the padding inside of the buttons - it happens due to the minimum width setting of the material buttons being set to 88.

Also, in my experience I noticed that material buttons have some weird margin around them. I solved that with materialTapTargetSize: MaterialTapTargetSize.shrinkWrap.

ButtonTheme(
  minWidth: 0,
  height: 30,
  child: RaisedButton(
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    // ...
  )
)

If you want the buttons to fill the entire maxCrossAxisExtent in height - use RawMaterialButton with custom constraints assigned.

---

Updated

I assumed the problem is within the buttons, but it just occurred to me that it is in fact about the GridView Delegate.

How SliverGridDelegateWithMaxCrossAxisExtent works as per Flutter docs:

This delegate creates grids with equally sized and spaced tiles.

The default value for childAspectRatio property of the delegate is 1.0, i.e. - a square. You are getting a perfectly logical layout displayed - grid of 1:1 blocks.

To solve this you need to come up with the right childAspectRatio value.

Some pseudocode: cellHeight = cellWidth / childAspectRatio.

e.g. childAspectRatio: 2 will display cells sized as following:

        2
-----------------
|               |
|               | 1
|               |
-----------------

Please let me know if this helped.

Answered By - George