Panier d’achat : Ajouter au panier

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

Il est temps de créer une véritable application à état partagé : une petite boutique. Au fil des prochaines leçons, elle se dotera d’une liste de produits avec des boutons d’ajout, d’un badge sur l’icône du panier, d’un écran de panier avec un total, d’un moyen de retirer des articles et d’un paiement. Deux écrans, un seul panier.

Le panier est l’état partagé : il est donc géré par un Notifier. Son état est la liste des produits du panier, et elle est vide au départ. Chaque modification définit une nouvelle liste, comme tu l’as appris :

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

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

La liste des produits elle-même ne change jamais : elle reste donc une simple liste const en haut du fichier. Seul ce qui change a besoin d’un fournisseur.

Défi

Moyen

Fais en sorte que les boutons d’ajout remplissent un panier :

Écris un notificateur Cart dont l’état est une List<Product>, vide au départ, avec une méthode add(Product product).
Ajoute final cartProvider = NotifierProvider<Cart, List<Product>>(Cart.new);
Le bouton de chaque ligne ajoute son produit.
La barre supérieure affiche le nombre de produits dans le panier : Shop (0), Shop (1)...

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

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