Carrito de compras: Añadir al carrito

Parte de la sección Gestión del estado del Journey de Flutter de Coddy. Lección 22 de 27.

Es hora de crear una aplicación real con estado compartido: una pequeña tienda. En las próximas lecciones tendrá una lista de productos con botones para añadirlos, una insignia en el icono del carrito, una pantalla del carrito con el total, una forma de eliminar artículos y una opción para pagar. Dos pantallas, un carrito.

El carrito es el estado compartido, así que tiene un Notifier. Su estado es la lista de productos del carrito, y empieza vacía. Cada cambio establece una lista nueva, como aprendiste:

class Cart extends Notifier<List<Product>> {
  @override
  List<Product> build() => [];

  void add(Product product) {
    state = [...state, product];
  }
}

La lista de productos en sí nunca cambia, así que se mantiene como una lista simple const al principio del archivo. Solo lo que cambia necesita un proveedor.

Desafío

Intermedio

Haz que los botones de añadir llenen un carrito:

Escribe un notificador Cart cuyo estado sea una List<Product>, vacío al inicio, con un método add(Product product).
Añade final cartProvider = NotifierProvider<Cart, List<Product>>(Cart.new);
El botón de cada fila añade su producto.
La barra superior muestra la cantidad de productos en el carrito: Shop (0), Shop (1)...

Pruébalo tú mismo

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class Product {
  const Product(this.name, this.price);

  final String name;
  final double price;
}

const products = [
  Product('Apple', 0.5),
  Product('Bread', 2.25),
  Product('Cheese', 4),
  Product('Milk', 1.2),
];

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ShopPage(),
    );
  }
}

class ShopPage extends ConsumerWidget {
  const ShopPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(title: const Text('Shop')),
      body: ListView(
        children: [
          for (final product in products)
            ListTile(
              title: Text(product.name),
              subtitle: Text('\$${product.price.toStringAsFixed(2)}'),
              trailing: IconButton(
                icon: const Icon(Icons.add_shopping_cart),
                onPressed: () {},
              ),
            ),
        ],
      ),
    );
  }
}