Carrello della spesa: Aggiungere al carrello

Fa parte della sezione Gestione dello stato del percorso Flutter di Coddy. Lezione 22 di 27.

È il momento di creare una vera app con stato condiviso: un piccolo negozio. Nelle prossime lezioni aggiungerai un elenco di prodotti con pulsanti per aggiungerli, un badge sull’icona del carrello, una schermata del carrello con un totale, un modo per rimuovere gli articoli e una procedura di pagamento. Due schermate, un carrello.

Il carrello è lo stato condiviso, quindi gli assegneremo un Notifier. Il suo stato è l’elenco dei prodotti nel carrello e inizialmente è vuoto. Ogni modifica imposta un nuovo elenco, come hai imparato:

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

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

L’elenco dei prodotti in sé non cambia mai, quindi rimane un semplice elenco const all’inizio del file. Solo ciò che cambia ha bisogno di un provider.

Sfida

Medio

Fai in modo che i pulsanti di aggiunta riempiano un carrello:

Scrivi un notifier Cart il cui stato sia un List<Product>, vuoto all'inizio, con un metodo add(Product product).
Aggiungi final cartProvider = NotifierProvider<Cart, List<Product>>(Cart.new);
Il pulsante di ogni riga aggiunge il relativo prodotto.
La barra superiore mostra il numero di prodotti nel carrello: Shop (0), Shop (1)...

Provalo tu

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