如何将基于Firestore构建卡片的Widget转换为StatelessWidget

把你当前的卡片构建方法改成独立的StatelessWidget非常简单，只需要把逻辑封装到一个类中，传入必要的产品数据即可。以下是改造后的完整代码：

class ProductCard extends StatelessWidget {
  final Products products;

  const ProductCard({super.key, required this.products});

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior: Clip.antiAlias,
      child: SizedBox(
        width: 300,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Image(image: NetworkImage(products.imageUrl)),
            ListTile(
              title: Text(products.name),
              subtitle: Text('Precio: ${products.price} \$'),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Padding(
                  padding: const EdgeInsets.fromLTRB(0, 0, 8, 8),
                  child: ElevatedButton(
                    style: ButtonStyle(
                      foregroundColor: MaterialStateProperty.all<Color>(
                        const Color(0xFFFFFFFF),
                      ),
                      backgroundColor: MaterialStateProperty.all<Color>(
                        const Color(0xFF6750A4),
                      ),
                    ),
                    onPressed: () => showDialog(
                      context: context,
                      barrierDismissible: false,
                      builder: (BuildContext context) => AlertDialog(
                        title: const Text('Subir Producto'),
                        content: const Text(
                            'El producto ha añadido a la base de datos correctamente'),
                        actions: <Widget>[
                          TextButton(
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              child: const Text('OK'))
                        ],
                      ),
                    ),
                    child: const Text(
                      'Añadir al Carro',
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

关键改动说明： #

• 新建ProductCard类并继承StatelessWidget，通过构造函数接收Products类型的产品数据
• 将原方法中的卡片逻辑迁移到build方法中，通过widget.products访问传入的产品信息
• 直接使用build方法提供的context来调用showDialog，无需额外传递

使用时只需要像这样调用：

ProductCard(products: yourProductData)

内容的提问来源于stack exchange，提问作者Willders Carvajal