GridView containing Cards doesn't calculate height correctly

Question

I have an app using a GridView to try and lay out some Cards. The relevant code looks a bit like this

body: new GridView.count(
  crossAxisCount: 2,
  children: [new Card(
    child: new Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: const Text("0", style: const TextStyle(
              fontWeight: FontWeight.bold, fontSize: 24.0)),
          title: const Text('Some Heading'),
          subtitle: const Text('My Subtitle'),
        ),
        new ButtonTheme
            .bar( // make buttons use the appropriate styles for cards
          child: new ButtonBar(
            children: <Widget>[
              new FlatButton(
                child: const Text('CALL TO ACTION'),
                onPressed: () {
                  /* ... */
                },
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  // same card repeated
  ],
),

Unfortunately, it doesn't render well:

The cards are too tall, they should end just below the "CALL TO ACTION" button. How can I fix this, and have the grid rows automatically respect the height of the contents?

Possible duplicate of [How to set Custom height for Widget in GridView in Flutter?](https://stackoverflow.com/questions/48405123/how-to-set-custom-height-for-widget-in-gridview-in-flutter) — Blasanka, Mar 24 '19 at 05:09

score 8 · Accepted Answer · answered Jun 26 '17 at 04:11

8

Your problem is that the tiles of GridView.count have a default aspect ratio of 1.0 (i.e. square), and it sounds like you want your tiles to be shorter than that.

A quick fix would be to hard code the childAspectRatio to a number you like. A more nuanced approach would be to implement a SliverGridDelegate that describes the layout you want and use GridView.custom. You could also just do a ListView of 2-element Row widgets and not use GridView at all.

answered Jun 26 '17 at 04:11

Collin Jackson

110,240
31
221
152

Can you please show some code, on how to implement this varying height of each child? – Vipul Asri Apr 09 '18 at 03:55
11

This is a basic requirement. I wonder why it needs to be so complicated that it cannot be taken into consideration by GridView.count(...). – Rohan Taneja Jul 26 '18 at 11:39
@collin - Collin Jackson I have to show grid in 1:1 (width:height) ratio but height should have additional 100 pixels extra. eg. How can i do? Kindly suggest. Thanks. – Kamlesh May 25 '21 at 15:02

score 1 · Answer 2 · answered Aug 20 '20 at 02:54

1

Changing the aspect ratio of the GridView.count should do the trick. the code below worked for me. you can tweak it as you want

 GridView.count(
      ...
      childAspectRatio: 10 / 9,

answered Aug 20 '20 at 02:54

Paul Kumchi

211
4
7

GridView containing Cards doesn't calculate height correctly

2 Answers2

Linked