En esta lección, aprenderás a implementar la funcionalidad de agregar un ítem al carrito de compras en tu aplicación de restaurante en Flutter. Utilizaremos el patrón de diseño Provider para gestionar el estado del carrito.

1. Implementación del Botón de Agregar al Carrito

Para agregar un ítem al carrito, utilizamos un IconButton que, al ser presionado, ejecutará el código correspondiente para añadir el producto. Aquí está el código que implementa esta funcionalidad:  

dart

child: IconButton(
  onPressed: () {
    // Crear el ítem del carrito
    final cartItem = Cart(
      id: items[index].id,
      name: items[index].name,
      price: items[index].price,
      image: items[index].image
    );

    // Agregar el ítem al carrito utilizando el CartProvider
    Provider.of<CartProvider>(context, listen: false).addItem(cartItem);
    
    // Mostrar un mensaje de confirmación
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("${items[index].name} agregado al carrito!"),
        duration: const Duration(seconds: 2),
      )
    );
  },
  icon: Icon(Icons.add_shopping_cart),
)

2. Desglose del Código

• IconButton: Este widget crea un botón que muestra un icono. En este caso, se utiliza el icono de un carrito de compras (Icons.add_shopping_cart).

• onPressed: Este es un callback que se ejecuta cuando el botón es presionado. Aquí es donde se implementa la lógica para agregar el ítem al carrito.

2.1 Crear el Ítem del Carrito  

dart

final cartItem = Cart(
  id: items[index].id,
  name: items[index].name,
  price: items[index].price,
  image: items[index].image
);

• Se crea una instancia de Cart con los detalles del ítem seleccionado. items[index] hace referencia al ítem que el usuario desea agregar.

2.2 Agregar el Ítem al Carrito  

dart

Provider.of<CartProvider>(context, listen: false).addItem(cartItem);

• Utilizamos el Provider para acceder al CartProvider y llamamos al método addItem, pasando el nuevo ítem del carrito.

2.3 Mostrar Mensaje de Confirmación  

dart

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text("${items[index].name} agregado al carrito!"),
    duration: const Duration(seconds: 2),
  )
);

• Se utiliza ScaffoldMessenger para mostrar un SnackBar, que informa al usuario que el ítem ha sido agregado al carrito. Este mensaje desaparece automáticamente después de 2 segundos.