➜ Carrito de Compra: Icono de notificación

En esta lección aprenderás a implementar un icono interactivo de carrito de compras con una notificación visual que indica la cantidad de ítems en el carrito. Utilizaremos Provider para gestionar el estado del carrito y actualizar dinámicamente el número de productos que contiene. También configuraremos una navegación hacia la pantalla del carrito al hacer clic en el icono.

Pasos para Implementar el Icono de Notificación:

1. Creación de la Clase CartIcon

La clase CartIcon es un widget sin estado (StatelessWidget) que representará el icono del carrito de compras y la notificación de cantidad.

dart

class CartIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<CartProvider>(
      builder: (_, cart, __) => Stack(
        children: [

2. Uso de Consumer para Actualizar el Estado del Carrito

Utilizamos el widget Consumer para escuchar cambios en el estado del carrito desde el CartProvider. Esto asegura que cada vez que el usuario añada o elimine productos, el número de ítems en la notificación se actualice automáticamente.  

dart

    return Consumer<CartProvider>(
      builder: (_, cart, __) => Stack(  // Escucha los cambios en el carrito
        children: [

3. Icono del Carrito y Navegación a la Pantalla del Carrito

El IconButton muestra el icono del carrito de compras y permite la navegación hacia la pantalla del carrito (PantallaCart) cuando se hace clic en él.

dart

         IconButton(
              onPressed: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (_) => PantallaCart()));  // Navegación a la pantalla del carrito
              },
              icon: Icon(Icons.shopping_cart)),

4. Posicionamiento y Estilo de la Notificación de Ítems

Se usa Positioned para colocar la notificación en la esquina superior derecha del icono del carrito. Si el carrito tiene ítems (cart.totalItems > 0), se muestra un contenedor rojo con el número de ítems dentro, de lo contrario, el contenedor estará vacío.

dart

          Positioned(
              right: 5,
              top: 5,
              child: cart.totalItems > 0
                  ? Container(
                      padding: EdgeInsets.all(3),
                      decoration: BoxDecoration(
                          color: Colors.red,  // Fondo rojo para la notificación
                          borderRadius: BorderRadius.circular(10)),
                      constraints: const BoxConstraints(
                        minWidth: 10,
                        minHeight: 5
                      ),
                      child: Text(
                          cart.totalItems.toString(),  // Mostrar el número de ítems
                        style: TextStyle(color: Colors.white),  // Texto en blanco
                      ),
                    )
                  : Container())  // Contenedor vacío si no hay ítems
        ],
      ),
    );
  }
}

Explicación del Código:

1. Consumer<CartProvider>:

   • Este widget escucha los cambios en el estado del carrito. Si el número de ítems cambia, la interfaz se actualiza automáticamente.

2. Stack:

   • Permite superponer widgets. En este caso, superponemos el icono del carrito y la notificación de cantidad.

3. IconButton:

   • Muestra el icono del carrito de compras y permite la navegación a la pantalla de detalles del carrito cuando se hace clic.

4. Positioned:

   • Posiciona la notificación de cantidad en la esquina superior derecha del icono del carrito.

5. Condición cart.totalItems > 0:

   • Si el carrito contiene ítems, muestra el número de productos en un círculo rojo. Si no hay ítems, no se muestra nada.