➜ Incrementar ó decrementar Items
Implementación de Incrementar y Decrementar la Cantidad de un Ítem en el Carrito | En esta lección aprenderás cómo implementar la funcionalidad para aumentar o disminuir la cantidad de un producto en el carrito de compras de tu aplicación de restaurante en Flutter. Utilizaremos los métodos increaseQty y decreaseQty del CartProvider para actualizar las cantidades
En esta lección aprenderás cómo implementar la funcionalidad de aumentar y disminuir la cantidad de un producto en el carrito de compras de tu app de restaurante en Flutter. Esta característica permitirá al usuario ajustar dinámicamente el número de unidades de un ítem desde la pantalla del carrito, actualizando el total y reflejando los cambios en tiempo real.
Pasos para Implementar la Funcionalidad de Incrementar y Decrementar:
1. Añadir los Botones de Incremento y Decremento
En la lista de ítems del carrito, cada producto tiene dos botones: uno para reducir la cantidad (decreaseQty) y otro para aumentarla (increaseQty). Cada botón está contenido en un Container con diseño circular y un ícono correspondiente.
Código:
dart
Container(
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(25),
),
child: IconButton(
onPressed: () {
cart.decreaseQty(item); // Lógica para reducir la cantidad
},
icon: Icon(Icons.remove, color: Colors.white),
),
),
Padding(
padding: EdgeInsets.all(10),
child: Text("${item.qty}", style: TextStyle(fontSize: 18.0)),
),
Container(
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(25),
),
child: IconButton(
onPressed: () {
cart.increaseQty(item); // Lógica para aumentar la cantidad
},
icon: Icon(Icons.add, color: Colors.white),
),
),
2. Métodos increaseQty y decreaseQty en el CartProvider
Debes asegurarte de que el CartProvider tenga los métodos necesarios para manejar el aumento y la reducción de las cantidades de cada ítem en el carrito.
dart
void increaseQty(Item item) {
item.qty++;
notifyListeners(); // Notificar a los widgets que el estado ha cambiado
}
void decreaseQty(Item item) {
if (item.qty > 1) {
item.qty--;
notifyListeners();
}
}
3. Actualizar la Cantidad en la Interfaz
Al presionar los botones de aumentar o disminuir, la cantidad del ítem se actualiza automáticamente en la interfaz de usuario. Gracias a Provider y al método notifyListeners(), la lista de productos se reconstruye cuando cambia la cantidad.
4. Control de Lógica para Cantidades Mínimas
Es importante añadir una condición en el método decreaseQty para evitar que la cantidad de un producto baje de 1. Si intentas disminuir la cantidad más allá de 1, el botón simplemente no tendrá efecto.
dart
if (item.qty > 1) { item.qty--; notifyListeners(); }
Explicación del Código:
-
decreaseQtyyincreaseQty:- Estos métodos son los encargados de ajustar la cantidad de cada ítem en el carrito. Llaman a
notifyListeners()para actualizar automáticamente la interfaz de usuario cuando cambian los valores.
- Estos métodos son los encargados de ajustar la cantidad de cada ítem en el carrito. Llaman a
-
notifyListeners():- Esta función es parte del paquete
Providery notifica a los widgets que están escuchando cualquier cambio en el estado, para que se reconstruyan con los nuevos datos.
- Esta función es parte del paquete
-
Botones con
IconButton:- El botón con el ícono de
removedisminuye la cantidad, mientras que el ícono deaddla incrementa.
- El botón con el ícono de
-
Condiciones para el Mínimo de Cantidad:
- Se asegura que la cantidad mínima permitida para un producto sea 1, evitando que el valor sea 0 o negativo.
2918 visitas
Capítulo 14 – Carrito de Compra: Cálculo totales »
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar