How to achieve different item heights in sliver grid

Question

I want to create a shopping cart app. I used a Sliver grid having different items with different heights but it's not working. Please help

grid in flutter

How to implement it in a custom scroll view? Does it have any sliver options? — Amon Chowdhury, May 20 '19 at 05:05
You can read its documentation. Yes it has many sliver options https://pub.dev/documentation/flutter_staggered_grid_view/latest/flutter_staggered_grid_view/flutter_staggered_grid_view-library.html — Mazin Ibrahim, May 20 '19 at 05:30
It's good to have that feature included here but they have a lot of issues though I couldn't use container in a tile widget. — Amon Chowdhury, May 20 '19 at 05:54

score 1 · Answer 1 · answered Feb 12 '21 at 11:46

This is not an answer to your particular problem but it may help anyone who just wants to resize the height of all SliverGrid items.

I had a similar problem and went to view the docs here. There is no explicit way to declare the height but I used childAspectRatio property of the SliverGridDelegate. A ratio of 1 means the sliver item retains its preset height. Any ratio above 1 reduces the height. In order to increase the height, I used a decimal ratio.

childAspectRatio: 0.5,

Here is the complete code of the SliverGrid and its delegate as well as a simple render of placeholder items:

SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 0.5,
        ),
        delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
            return Card(
              child: Text(
                  "Item $index"
              ),
            );
          },
          childCount: 10,
        ),
      )

Please note that this will change the height of all grid items.

How to achieve different item heights in sliver grid

1 Answers1