Search code examples
flutterflutter-layoutflutter-gridview

Flutter remove space between GridView row

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:

enter image description here

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.