Building a Card with Images problem with overflow - flutter

Question

I'm currently building products from my store in my products screen, What I'm attempting to do is, create a GridView and a card for each product. I'm having problem with the overflow from the image.
What I want to look like:
How it is going:
My code for the card:
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:loja_virtual_nnananene/helpers/color_select.dart';
import 'package:loja_virtual_nnananene/models/product.dart';
class ProductListTile extends StatelessWidget {
const ProductListTile(this.product);
final Product product;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.of(context).pushNamed('/product', arguments: product);
},
child: Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
alignment: Alignment.center,
children: [Image.network(product.images!.first)],
),
Text(
product.name,
style: GoogleFonts.firaCode(
textStyle:
TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
),
Text('R\$ ${product.basePrice.toStringAsFixed(2)}',
style: GoogleFonts.firaCode(
textStyle: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w800,
color: ColorSelect.cprice)))
],
),
));
}
}

Answer 1

Try to add your Card Widget inside SingleChildScrollView() Widget :
SingleChildScrollView(
child:Card(),
),

Answer 2

There is no need Stack widget in your code. Try this:
If you want u can remove ConstrainedBox, but image size will be different according to its size.
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:loja_virtual_nnananene/helpers/color_select.dart';
import 'package:loja_virtual_nnananene/models/product.dart';
class ProductListTile extends StatelessWidget {
const ProductListTile(this.product);
final Product product;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.of(context).pushNamed('/product', arguments: product);
},
child: Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ConstrainedBox(
constraints: const BoxConstraints(
minHeight: 50.0,
maxHeight:300.0
),
child: Image.network(product.images!.first),
),
Text(
product.name,
style: GoogleFonts.firaCode(
textStyle:
TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
),
Text('R\$ ${product.basePrice.toStringAsFixed(2)}',
style: GoogleFonts.firaCode(
textStyle: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w800,
color: ColorSelect.cprice)))
],
),
));
}
}

Answer 3

Are you using SliverGridDelegateWithFixedCrossAxisCount? If yes, it has a property aspectRatio which is default to 1.0 (height will be same as width). Try to make it 0.7 or something and your error will be gone in that case.

Answer 4

You can achieve the first image this way
Container(
decoration: Boxdecoration(
color: Colors.white,
borderRadius: borderRadius.circular(8),
boxShasow: [
BoxShadow(
offset: Offset(10,17),
blurRadius:17,
spreadRadius: -23,
color: Colors.grey,),],),
child: Padding(
padding: const EdgeInset.all(10.0),
child: Column(
Image.network(
"your url",
width: width of choice,
height: height of choice,
),
Text(
"product name",
testAlign:TestAlign.left,
style:(your style),
),
Row(
children:<Widget>[
Text(
"product amount",
testAlign:TestAlign.left,
style:(your style),
),
Expanded(
child:Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Icon(
Icons.heart_outlind,
color:Colors.blue,
size:24,
),
SizedBox(width:5),
],),),
],),),),