Search code examples
flutterdartstaggered-gridview

How to make a staggered grid view with varying image height in flutter?

I wanted to have a staggered grid view with Card widgets, I want the height of the card to be dependent of the height of the image being loaded.

Since my build method is too long, here is my code for my card view in gist:

https://gist.github.com/brendoncheung/2026a64410eddde20fa8ec740bbb9d84

The SizedBox on line 7 is what I believe is making the card to have a constant height, but if I remove the SizedBox it crashes.

If I remove the SizedBox, then I will get this error:

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

I have made sure that the parents of all the Column and Row widget doesn't have a unbound constraint.

Here is my StaggeredGridView code:

  @override
  Widget build(BuildContext context) {
    return StaggeredGridView.countBuilder(
      crossAxisCount: 2,
      itemCount: items.length,
      itemBuilder: (context, index) => ItemWidget(
          item: items[index],
          onTap: (item) => Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => DetailItemScreen(
                    item: item,
                  )))),
      staggeredTileBuilder: (index) => StaggeredTile.fit(1),
    );
  }

This 2 images below is the card widget, and the other one is with the debug paint on,

enter image description here

enter image description here

Solution

  • With comparison of my StaggeredGridView settings with yours only thing that's different, is mine has this two settings which help fix viewport issue.

    physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,

    But I agree sized box is probably making height of same size.