Flutter remove space between GridView row

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.