How to increase Card size inside GridView - flutter

Question

Here is my code:
GridView.count(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
crossAxisCount: 3,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
primary: false,
shrinkWrap: true,
children: tempSearchStore.map((element) {
return InkWell(
onTap: (){
print(element['ID'].toString());
Navigator.push(context, MaterialPageRoute(
builder: (context) => SearchResultScreen(ID: element['ID'],Pin:widget.pin),
));
},
child: Container(
height: 20,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
elevation: 5.0,
child: Container(
height: 20,
child: Center(
child: Text(element['Name'],
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
)
)
)
),
),
);
}).toList()
)
I want to change the height and width of my card but I'm not able to do so, even I also tried wrapping Card into Container and give height and width but failed. Only I'm able to change by changing the value of CrossAxisCount in GridView and that also changes according to itself.
Here is my Image:
I want it's height to be more and width is Okay.

Answer 1

The key is childAspectRatio. This value is used to determine the layout in GridView. In order to get the desired aspect, you have to set it to the (itemWidth / itemHeight).
GridView.count(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
crossAxisCount: 3,
childAspectRatio: (itemWidth / itemHeight),
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
primary: false,
shrinkWrap: true,
children: tempSearchStore.map((element) {
return InkWell(
onTap: (){
print(element['ID'].toString());
Navigator.push(context, MaterialPageRoute(
builder: (context) => SearchResultScreen(ID: element['ID'],Pin:widget.pin),
));
},
child: Container(
height: 20,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
elevation: 5.0,
child: Container(
height: 20,
child: Center(
child: Text(element['Name'],
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
)
)
)
),
),
);
}).toList()
)
and if this doesn't work for you look at this package: https://pub.dartlang.org/packages/flutter_staggered_grid_view