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],);
              },
            ),
          ),
        ),
      ],
    );
  }
}

score 11 · Answer 1 · edited Apr 30 '19 at 13:02

11

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(),
)

edited Apr 30 '19 at 13:02

ush189

1,342
6
22
30

answered Apr 30 '19 at 10:44

Nikhat Shaikh

3,175
1
16
21

1

Thanks! ush189 for help – Nikhat Shaikh May 08 '19 at 11:25
3

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. – Paritosh Nov 24 '22 at 06:36

score 0 · Answer 2 · answered Apr 26 '19 at 05:12

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

score 0 · Answer 3 · answered Apr 26 '19 at 05:14

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,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

mustaq saiyed · Answer 4 · 2019-04-26T09:19:45.310

0

In GridView use this line

the childAspectRatio as per yor need 
childAspectRatio: double,

edited Apr 26 '19 at 09:19

answered Apr 26 '19 at 05:33

mustaq saiyed

37
4

Flutter GridView item wrap_content height

4 Answers4