Inicio » Cursos » App restaurant con pedidos en Flutter

Curso App restaurant con pedidos en Flutter

Capitulo 13 ➜ Carrito de Compra: Incrementar, decrementar

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:

  1. decreaseQty y increaseQty:

    • 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.
  2. notifyListeners():

    • Esta función es parte del paquete Provider y notifica a los widgets que están escuchando cualquier cambio en el estado, para que se reconstruyan con los nuevos datos.
  3. Botones con IconButton:

    • El botón con el ícono de remove disminuye la cantidad, mientras que el ícono de add la incrementa.
  4. 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.

2313 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Más cursos que pueden interesarte

Más cursos

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2025