Favourite list button on product - flutter

Question

i want to make an this function on the product but i don't know how to since I'm too fresh with flutter...
so here is the picture of how I want it to be
The Sample
and here is my codes.
child: GridTile(
footer: Container(
color: Colors.white,
child: Row(
children: [
Expanded(
flex: 8,
child: Text(product_name),
),
Text("\$$product_price",
style: const TextStyle(fontWeight: FontWeight.w600)),
TextButton(
onPressed: (){
debugPrint('added to cart');
},
child: Text("ADD TO CARD"),
style: TextButton.styleFrom(
primary: Colors.lightBlue[800],
shadowColor: Colors.deepPurple,
// elevation: 5,
),
),
],
),
),
child: Image.asset(
product_picture,
fit: BoxFit.cover,
),
),
),
),
),
and it is how it looks
How it looks
I will appreciate any help!

Answer 1

Here is something similar to the sample
GridView.count(
shrinkWrap: true,
childAspectRatio: .8,
crossAxisCount: 2,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
children: List.generate(10, (index) {
return Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.network('https://i.ytimg.com/vi/6OovMIjDtAM/maxresdefault.jpg',)
),
const SizedBox(height: 14),
const Text('My Drink 101',
style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w600),
),
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('500 ml', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.w300)),
Text('\$500 ml', style: TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.w300)),
],
),
),
const SizedBox(height: 16),
Container(
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {
// add to cart
},
child: Icon(Icons.shopping_cart_outlined, color: Colors.blue,),
),
),
],
),
Align(
alignment: Alignment.topLeft,
child: InkWell(
onTap: () {
// add to favourite
},
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
Icons.favorite_border,
color: Colors.white,
),
),
),
),
],
),
);
}),
)

Answer 2

Well, there is a bunch needed to make a card similar to the sample you provided. Take a look at this video to get some ideas. I would recommend you to read the flutter widgets documentation for a better understanding of how each property work.
This channel also has a lot of great flutter UI content that is worthy to have a look at.
To start I would consider using a Card instead of a Container