Curso App restaurant con pedidos en Flutter
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.
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.
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),
),
),
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();
}
}
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.
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(); }
decreaseQty
y increaseQty
:
notifyListeners()
para actualizar automáticamente la interfaz de usuario cuando cambian los valores.notifyListeners()
:
Provider
y notifica a los widgets que están escuchando cualquier cambio en el estado, para que se reconstruyan con los nuevos datos.Botones con IconButton
:
remove
disminuye la cantidad, mientras que el ícono de add
la incrementa.Condiciones para el Mínimo de Cantidad:
2313 visitas
« Capítulo 12 – Carrito de Compra: Lista de Items
Capítulo 14 – Carrito de Compra: Cálculo totales »
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025