产品上的收藏夹列表按钮

Question

我想在产品上做一个this函数，但我不知道怎么做，因为我对flutter太陌生了。。。

这是我希望它成为的图片

样品

这是我的密码。

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,
),
),
),
),
),

这就是它的样子的外观

我将感谢任何帮助！

Answer 1

这里有一些类似于示例的东西

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

好吧，制作一张类似于您提供的示例的卡片需要一堆。看看这个视频，了解一些想法。我建议您阅读flutter小部件文档，以便更好地了解每个属性的工作方式。

这个频道还有很多很棒的flutter UI内容，值得一看

首先，我会考虑使用Card而不是Container