产品上的收藏列表按钮

Question

我想在产品上做一个这个功能，但我不知道怎么做，因为我对颤动太新鲜了......

所以这是我想要的图片

The Sample

这是我的代码。

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

这就是它的外观 How it looks

我将不胜感激！

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

嗯，制作一张与您提供的样品相似的卡片需要很多东西。看看这个video 以获得一些想法。我建议您阅读 Flutter 小部件文档，以便更好地了解每个属性的工作原理。

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

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