Flutter GridView item wrap_content height - flutter

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

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

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

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

Answer 4

In GridView use this line
the childAspectRatio as per yor need
childAspectRatio: double,