Carrito de compras: La insignia

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

Las tiendas muestran el carrito como un icono con un número pequeño encima: una insignia. Flutter tiene un widget para ello: Badge dibuja su label en una burbuja roja en la esquina de su child:

IconButton(
  icon: Badge(
    label: Text('${cart.length}'),
    isLabelVisible: cart.isNotEmpty,
    child: const Icon(Icons.shopping_cart),
  ),
  onPressed: () {},
)

isLabelVisible oculta la burbuja cuando es false. Un carrito vacío muestra el icono sin más, que resulta más discreto que un 0. cart.isNotEmpty es true cuando la lista tiene al menos un elemento.

La insignia observa el mismo cartProvider que observaba el título. Cualquier widget puede hacerlo, esté donde esté.

Desafío

Fácil

Mueve el recuento del título a una insignia:

El título vuelve a ser Shop.
Añade un IconButton del carrito a actions de la barra superior, con Icons.shopping_cart dentro de un Badge que muestre el número de productos.
Oculta el número de la insignia cuando el carrito esté vacío.

El botón todavía no hace nada; la pantalla del carrito viene después.

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),
];

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

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

final cartProvider = NotifierProvider<Cart, List<Product>>(Cart.new);

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) {
    final cart = ref.watch(cartProvider);
    return Scaffold(
      appBar: AppBar(title: Text('Shop (${cart.length})')),
      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: () {
                  ref.read(cartProvider.notifier).add(product);
                },
              ),
            ),
        ],
      ),
    );
  }
}