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

user_8153664 0
Viewed 2138

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?

enter image description here

flutter-layout flutter
1 Answers

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.

user_87735600
Related