Flutter GridView item wrap_content height

Question

I am an android developer and new to flutter.

I would like to create a GridView with wrap content item height (I draw it with pen in the screenshot). But I have tried with the following code and it gave me only square grid item. I would like how to get height wrap content grid item and I have no idea and can't find how to get it. Please help. Thank you.

class CategoryItem extends StatelessWidget {
  final Category category;
  CategoryItem({Key key, @required this.category})
      : assert(category != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Text(
        category.name,
        style: TextStyle(fontSize: 34.0, fontWeight: FontWeight.bold),
      ),
      color: Colors.amberAccent,
    );
  }
}


class CategoryGrid extends StatefulWidget {

  final List<Category> items;

  const CategoryGrid({Key key, this.items}) : super(key: key);

  @override
  _CategoryGridState createState() => _CategoryGridState();
}

class _CategoryGridState extends State<CategoryGrid> {

  @override
  Widget build(BuildContext context) {
    final Orientation orientation = MediaQuery.of(context).orientation;
    return Column(
      children: <Widget>[
        Expanded(
          child: SafeArea(
            top: false,
            bottom: false,
            child: GridView.builder(
              itemCount: widget.items.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3,),
              itemBuilder: (BuildContext context, int index) {
                return CategoryItem(category: widget.items[index],);
              },
            ),
          ),
        ),
      ],
    );
  }
}

Grewitz

Answer 1

For height you can use "childAspectRatio"

For example-

GridView.count(
    childAspectRatio: 4.0,
    crossAxisCount: 2,

    padding: EdgeInsets.all(5.0),
    children: <Widget>[
        Container(
            margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
            child: Text(
                '10:00 AM - 12:00 PM',
                style: new TextStyle( color: Colors.black87, fontSize: 14.0, 
                    fontWeight: FontWeight.normal,
                ),
            ), 
        );
    ],
    shrinkWrap: true,
    // todo comment this out and check the result
    physics: ClampingScrollPhysics(),
)

Idiomatic

Thanks! ush189 for help – Idiomatic

childAspectRatio is a hardcoded value. I am running this code on horizontal tablet. If I test this on other screen size tablets, I am getting overflow issue. – Parous

Answer 2

To wrap content grid item you can use the childAspectRatio property of gridview

Ex.

GridView.builder(
  itemCount: widget.items.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3, childAspectRatio:(MediaQuery.of(context).size.height * 0.006)),
  itemBuilder: (BuildContext context, int index) {
     return CategoryItem(category: widget.items[index],);
  },
) 

you can set childAspectRatio 0.006 instead of according to your content size

Nadenenader

Answer 3

You need to set childAspectRatio attribute of SliverGridDelegateWithFixedCrossAxisCount delegate to control the height with respect to width of the grid item.

If you just want to "shrink" the height (and something like match_parent for widhth) of the text widget wrap it around a Column, Row and Expanded like this

class CategoryItem extends StatelessWidget {
  final Category category;

  CategoryItem({Key key, @required this.category})
      : assert(category != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: Card(
                child: Text(
                  category.name,
                  style: TextStyle(fontSize: 34.0, fontWeight: FontWeight.bold),
                ),
                color: Colors.amberAccent,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

Harvin

Answer 4

In GridView use this line

the childAspectRatio as per yor need 
childAspectRatio: double,

Ignatius