Flutter remove space between GridView row

Question

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,),),
                         ],
                    ),

Awning

Thanks but text is not the problem. I understand in the image that the text is overflowing but that was not my question. I just set the text size to 2 and the space between the rows is still there. – Awning

Sorry, ok why you are using maxCrossAxisExtent: 150, – Havenot

I was just playing with settings, as I said in my question I also tried using fixed number of columns and that does not change it either. – Awning

Actually, what you want to accomplish is easier done by using Wrap widget. The wrap widget is similar to Row or a Column widget with an added advantage that it can adjust its children according to the space available to it on the Screen. Have you considered this solution? Example: flutter-widget.live/widgets/Wrap – Boiled

Answer 1

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.

Rockafellow

Thanks. I removed the buttons and still the same so not the buttons – Awning

Hi George thanks, I just worked it out as well. I changed the aspect ratio like this SliverGridDelegateWithFixedCrossAxisCount(childAspectRatio: 3, crossAxisCount: 3,), – Awning

Answer 2

Try this hope so it will work,

GridView.builder(
        itemCount: 6,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,),
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              child: Flex(
                direction: Axis.vertical,
                children: <Widget>[
                  Expanded(flex: 5, child: InkWell(
                    onTap: (){},
                  )),
                  Expanded(
                      flex: 5,
                      child: RaisedButton(
                        onPressed: () {},
                        child: Text('Bt'),
                      ))
                ],
              ),
            ),
          );
        },
      ),

Havenot