En esta lección aprenderás a crear la pantalla del carrito de compras para tu app de restaurante en Flutter. Esta pantalla permitirá a los usuarios ver los productos que han añadido al carrito, ajustar las cantidades de cada producto y calcular el subtotal por producto. También se manejarán los casos en que el carrito esté vacío, mostrando un mensaje adecuado.

Pasos para Implementar la Pantalla del Carrito:

1. Configuración Inicial del CartProvider y el Estado del Carrito

Primero, necesitamos obtener el estado actual del carrito de compras a través de Provider. Usamos Provider.of<CartProvider>(context) para acceder a los ítems en el carrito y mostrarlos en la interfaz.  

dart

final cart = Provider.of<CartProvider>(context);
final cartItems = cart.items;

2. Construcción de la Interfaz con Scaffold

Utilizamos un Scaffold para la estructura de la pantalla, definiendo el color de fondo y el AppBar para indicar que es la pantalla del carrito. 

dart

return Scaffold(
    backgroundColor: Colors.amber,
    appBar: AppBar(
      backgroundColor: Colors.amber,
      title: Text("Carrito de pedidos"),
    ),

3. Manejo del Carrito Vacío

Si el carrito está vacío, se muestra un mensaje centralizado que indica "Carrito Vacío" al usuario.  

dart

    body: cartItems.isEmpty
        ? Center(
            child: Text("Carrito Vacio"),
          )

4. Construcción de la Lista de Ítems en el Carrito

Si el carrito contiene productos, utilizamos un ListView.builder para mostrar cada ítem en una tarjeta (Card). Cada tarjeta incluye la imagen del producto, el nombre, la cantidad, el precio unitario y el subtotal calculado.  

dart

    : Column(
        children: [
          Expanded(
              child: ListView.builder(
                padding: EdgeInsets.all(16.0),
                itemCount: cartItems.length,
                itemBuilder: (context, index) {
                  final item = cartItems[index];
                  return Card(
                    color: Colors.white,
                    child: ListTile(
                      leading: Image.network(
                          "${Constants.imageUrl}/${item.image}"),
                      title: Text(item.name),
                      subtitle: Text(
                          "\$${item.price.toStringAsFixed(2)} * ${item.qty} = \$${item.subtotal.toStringAsFixed(2)}"),

5. Interfaz para Ajustar Cantidades de Productos

Cada producto en el carrito tiene dos botones (uno para aumentar la cantidad y otro para disminuirla), con íconos add y remove. También se muestra la cantidad actual entre los botones.  

dart

                      trailing: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Container(
                            decoration:BoxDecoration(
                              color: Colors.orange,
                              borderRadius: BorderRadius.circular(25)
                            ),
                            child: IconButton(
                                onPressed: () {}, // 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: () {}, // Lógica para aumentar la cantidad
                                icon: Icon(Icons.add, color: Colors.white)),
                          )
                        ],
                      ),
                    ),
                  );
                }))
        ],
      ));

Explicación del Código:

1. Provider.of<CartProvider>(context):

   • Accedemos a los ítems del carrito desde el CartProvider para mostrarlos en la interfaz.

2. Manejo del Carrito Vacío:

   • Si no hay productos en el carrito, se muestra el mensaje "Carrito Vacio".

3. Lista de Ítems (ListView.builder):

   • Se utiliza para crear una lista dinámica de productos en el carrito, donde cada ítem se muestra dentro de un Card con su imagen, nombre, precio y cantidad.

4. Ajuste de Cantidades:

   • Dos botones (IconButton) permiten al usuario aumentar o reducir la cantidad de cada producto en el carrito.

5. Subtotal:

   • Se calcula y se muestra el subtotal de cada producto basado en la cantidad seleccionada.