Flutter: How to make GridView's row's height to wrap the content?

Question

I'm trying to create a Grid view with 2 columns, where each item can have different height as shown in the image. Is it possible to set the height of row equal to maximum item's height in that row, in other words, is it possible to make row wrap its content independent from its items height?

Solution

You can't GridView wrap content because all item ar scaled up to the largest item's heigth. You can either change childAspectRatio (there will be empty space on smaller items) or user StaggeredGridview From here

A Flutter staggered grid view which supports multiple columns with rows of varying sizes.

It is really easy to use

StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

You can find more examples in Example project.

Comments

[Robert Apikyan]

Thanks, but the aspect ration will not solve the problem

[Constantin N.]

(there will be empty space on smaller items) that means this is not the best solution. **YOU SHOULD use StaggeredGridView ***