There are constantly overflows on the card structure - flutter

Question

I just started flutter. I tried to make a card structure but I think it is quite wrong. I could never fix it. I am using Gridview extend. In this way, the column numbers change dynamically as the screen gets smaller or larger. but i keep getting overflow error what should i do.
var response = sepet.itemsCount[item.name];
return SizedBox(
child: Padding(
padding: EdgeInsets.all(0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
onTap: () {},
child: Column(
children: <Widget>[
ListTile(
title: Text(item.name ?? ''),
subtitle: Text(item.defaultPrice.toString() + '\$'),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
countChanger(sepet, false, item),
Padding(
padding: EdgeInsets.only(left: 8.0, right: 8.0),
child: Text(
response != null ? response.toString() : '0',
style: TextStyle(fontSize: 18.0),
),
),
countChanger(sepet, true, item),
],
),
ButtonTheme(
height: 25,
minWidth: 25,
child: ElevatedButton(
onPressed: () {
!isAdded
? sepet.sepeteEkle(item)
: sepet.deleteItem(item);
},
style: ElevatedButton.styleFrom(
primary: !isAdded
? Colors.teal
: Colors.red,
),
child: Text(!isAdded ? 'Ekle' : 'Çıkar'),
),
),
],
),
)
],
),
),
),
],
),
),
);
My gridview extend structure is like this
child: GridView.extent(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
maxCrossAxisExtent: 250.0,
crossAxisSpacing: 20.0,
mainAxisSpacing: 20.0,
children: List.generate(foods!.length, (index) {
return itemCard(foods[index].menuItem ?? MenuItem(), value);
}),

Answer 1

The question you need to answer is what would you like to happen if the width of that card is so small? Do you want a different arrangement of those elements? If you do decide on what that would look like and check the constraint with LayoutBuilder Or the whole screen width with MediaQuery whatever you feel is best. You could also make that bit scroll horizontally by using SingleChildScrollView. This is a design decision. You must image what things look like when screen size changes, and be as deliberate as possible with the responsiveness rather then to just try to find some magic widget which we are all guilty of doing sometimes.

Answer 2

Try below code hope its helpful to you I have try similar to your code and add your widgets in Expanded or Flexible Widgets.
flexible widgets
expanded Widgets
GridView.builder(
padding: const EdgeInsets.all(8),
itemCount: 4,
itemBuilder: (ctx, i) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text('data'),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
margin: EdgeInsets.all(10),
height: 35.0,
width: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Colors.grey,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
InkWell(
child: Icon(Icons.remove, color: Colors.green),
onTap: () {},
),
Spacer(),
Text(
'0',
style: Theme.of(context)
.textTheme
.subtitle2!
.copyWith(fontSize: 16.0),
),
Spacer(),
InkWell(
child: Icon(
Icons.add,
color: Colors.green,
),
onTap: () {},
),
],
),
),
),
Expanded(
child: ElevatedButton(
onPressed: () {},
child: Text(
'Sub Total',
style: TextStyle(
fontSize: 15,
),
),
),
),
],
),
],
),
);
},
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 170.0,
mainAxisExtent: 93,
),
),
Your Result screen like->