Panier d’achat : Le badge

Fait partie de la section Gestion d’état du Journey Flutter de Coddy. Leçon 23 sur 27.

Les boutiques affichent le panier sous la forme d’une icône accompagnée d’un petit nombre, un badge. Flutter propose un widget pour cela : Badge dessine son label dans une bulle rouge, dans le coin de son child :

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

isLabelVisible masque la bulle lorsque sa valeur est false. Un panier vide affiche l’icône seule, ce qui est plus discret qu’un 0. cart.isNotEmpty vaut true lorsque la liste contient au moins un élément.

Le badge observe le même cartProvider que le titre. N’importe quel widget peut le faire, où qu’il se trouve.

Défi

Facile

Déplace le nombre du titre vers un badge :

Le titre redevient Shop.
Ajoute un IconButton de panier à actions de la barre supérieure, avec Icons.shopping_cart à l’intérieur d’un Badge qui affiche le nombre de produits.
Masque le nombre du badge lorsque le panier est vide.

Le bouton ne fait encore rien ; l’écran du panier arrive ensuite.

Essayez vous-même

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