Curso App restaurant con pedidos en Flutter
Implementación de Provider en el Carrito de Compras
En esta lección, aprenderás a implementar el patrón Provider en Flutter para gestionar el estado del carrito de compras en tu aplicación de restaurante. Utilizaremos el modelo Cart para almacenar y manipular los items seleccionados por el usuario, facilitando la notificación de cambios
Provider es un paquete que ayuda a gestionar el estado en aplicaciones Flutter. Facilita la inyección de dependencias y la comunicación entre widgets sin necesidad de pasar datos manualmente por todo el árbol de widgets. Con Provider, los widgets pueden reaccionar automáticamente a los cambios en los datos.
CartProvider
A continuación, se presenta el código del CartProvider
, que se encargará de manejar la lógica del carrito:
import 'package:flutter/material.dart';
import 'package:restaurant/models/cart.dart';
class CartProvider with ChangeNotifier {
List<Cart> _items = [];
List<Cart> get items => _items;
void addItem(Cart item) {
// Verifica si el artículo ya está en el carrito
final index = _items.indexWhere((cart) => cart.id == item.id);
if (index >= 0) {
// Si ya existe, solo actualiza la cantidad
_items[index].quantity++;
} else {
// Si no existe, añade el artículo al carrito
_items.add(item);
}
notifyListeners(); // Notifica a los oyentes
}
void removeItem(Cart item) {
_items.remove(item);
notifyListeners(); // Notifica a los oyentes
}
void increaseQuantity(Cart item) {
final index = _items.indexWhere((cart) => cart.id == item.id);
if (index >= 0) {
_items[index].quantity++;
notifyListeners(); // Notifica a los oyentes
}
}
void decreaseQuantity(Cart item) {
final index = _items.indexWhere((cart) => cart.id == item.id);
if (index >= 0) {
// Disminuye la cantidad
_items[index].quantity--;
// Si la cantidad llega a cero, elimina el artículo del carrito
if (_items[index].quantity <= 0) {
removeItem(_items[index]); // Llama al método removeItem
} else {
notifyListeners(); // Notifica a los oyentes si solo se ha reducido la cantidad
}
}
}
int get totalItems {
return _items.fold(0, (sum, item) => sum + item.quantity);
}
// Calcula el subtotal general del carrito
double get subtotal {
return _items.fold(0.0, (sum, item) => sum + item.subtotal);
}
// Calcula el TAX (18%) sobre el subtotal
double get tax {
return subtotal * 0.18;
}
// Calcula el total general (subtotal + tax)
double get total {
return subtotal + tax;
}
// Limpia el carrito
void clearCart() {
_items.clear();
notifyListeners(); // Notifica a los oyentes
}
}
Propiedades:
_items
: Una lista privada que almacena los items en el carrito.items
: Getter para acceder a la lista de items desde otros widgets.Métodos:
addItem(Cart item)
:
dart
final index = _items.indexWhere((cart) => cart.id == item.id);
if (index >= 0) {
// Si ya existe, solo actualiza la cantidad
_items[index].quantity++;
} else {
// Si no existe, añade el artículo al carrito
_items.add(item);
}
notifyListeners(); // Notifica a los oyentes
notifyListeners()
para notificar a los widgets que dependen de este estado.removeItem(Cart item)
:
dart
_items.remove(item);
notifyListeners(); // Notifica a los oyentes
_items
y notifica a los oyentes sobre el cambio.increaseQuantity(Cart item)
:
dart
final index = _items.indexWhere((cart) => cart.id == item.id);
if (index >= 0) {
_items[index].quantity++;
notifyListeners(); // Notifica a los oyentes
}
decreaseQuantity(Cart item)
:
dart
final index = _items.indexWhere((cart) => cart.id == item.id);
if (index >= 0) {
// Disminuye la cantidad
_items[index].quantity--;
// Si la cantidad llega a cero, elimina el artículo del carrito
if (_items[index].quantity <= 0) {
removeItem(_items[index]); // Llama al método removeItem
} else {
notifyListeners(); // Notifica a los oyentes si solo se ha reducido la cantidad
}
}
totalItems
:
dart
return _items.fold(0, (sum, item) => sum + item.quantity);
Funcionamiento: Utiliza fold
para sumar las cantidades de todos los items en el carrito y devolver el total.
subtotal
:
dart
return _items.fold(0.0, (sum, item) => sum + item.subtotal);
_items
.tax
:
dart
return subtotal * 0.18; // Cambiado de igv a tax
total
:
dart
return subtotal + tax; // Cambiado de igv a tax
clearCart()
:
dart
_items.clear();
notifyListeners(); // Notifica a los oyentes
_items
y notifica a los oyentes sobre el cambio.En esta lección, has aprendido a implementar el patrón Provider para gestionar el carrito de compras en tu aplicación de restaurante. Esta estructura te permitirá manejar el estado de forma eficiente y reaccionar a los cambios en la interfaz de usuario de manera automática. En la próxima lección, exploraremos cómo conectar este carrito con la interfaz para permitir que los usuarios interactúen con él.
1927 visitas
« Capítulo 5 – Implementación de ApiService
Capítulo 7 – Diseño de la interface de inicio »
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024