I want to convert a Widget into a StatelessWidget - flutter

Question

I have a Widget to build Cards using the data stored in the Firestore i want to convert this Widget into a StatelessWidget to use the buttons of the Card.
This is the Widget
Widget buildProducts(Products products) => 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',
),
),
),
],
),
],
),
),
);

Answer 1

Create a StatelessWidget and pass the Products through constructor and paste the card on return section.
class ProductWidet extends StatelessWidget {
final Products products;
const ProductWidet({required this.products,Key? key}) : super(key: key);
#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',
),
),
),
],
),
],
),
),
);
}
}