Question posted in 
I wrapped a container with a gridView, as a result the card is overflowing. i wrapped gridView with a sizeBox and set the height to 600. Can somebody help me with this. im just started learning flutter.
SizedBox(
height: 600,
child: GridView.count(
crossAxisSpacing: 8,
mainAxisSpacing: 8,
crossAxisCount: 2,
children: List.generate(
2,
(index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (builder) =>
const ScreenProductDetails(),
),
);
},
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(8),
),
),
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: [
const Align(
alignment: Alignment.topRight,
child: Icon(
Icons.favorite_outline,
color: Color(0xFF868889),
),
),
Image.asset(
'assets/product-images/peach.png',
),
const SizedBox(
height: 8.0,
),
const Text(
"$ 7.00",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Color(0xFF6CC51D),
),
),
const Text(
"Fresh Peach",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: Colors.black,
),
),
const Text(
"Dozen",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Color(0xFF868889),
),
),
const SizedBox(
height: 8.0,
),
const Divider(
color: Color(0xFFEBEBEB),
),
TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (builder) =>
const ScreenCart(),
),
);
},
child: const Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Icon(
Icons.shopping_bag_outlined,
size: 15,
color: Color(0xFF6CC51D),
),
SizedBox(
width: 8.0,
),
Text(
"Add to cart",
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.black,
),
),
],
),
),
],
),
),
),
);
},
),
),
),
2
Answers
It looks like you’re encountering an overflow error because the
Image.assetwidget inside your grid cells doesn’t fit within the allotted space, especially when screen sizes or resolutions change.To solve this problem, you can make the following adjustments:
Wrap the
Image.assetwith anExpandedwidget:Set the
fitproperty toBoxFit.contain:Here’s how you can adjust your code:
The content you ate putting in each grid element is too much which cause that overflow.
One question , How that grid element get sized?
according to the scroll direction of the grid view, suppose it’s vertical.
You are putting only 2 elements on the cross axis (X axis) so the element width will be half of the screen width.
What about its height? it’s calculated from an equation of aspect ratio (it’s the percent of dividing mainAxisSize to CrossAxisSize of the element), by default it’s 1 so the element by default are squares (equal width and height).
in your case width fits but not the height, so i suggest to maximize the height of the element by changing the
childAspectRatioto smaller value.Note: when you set
childAspectRatioto .5 that means the grid element width will be half of its height.So, change the
childAspectRatioto value smaller than 1 regularly and see the result of each value, once it’s enough and no more overflow you can stop because the grid element fits in that area.