CODEWITHSUNDEEP
flutterflutter-layout
Robert Apikyan
Robert Apikyan

Reputation: 2092

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

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

Upvotes: 2

Views: 3521

Answers (1)

Constantin N.
Constantin N.

Reputation: 2839

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.

Upvotes: 4

Related Questions