Warenkorb: Der Warenkorb-Bildschirm

Teil des Abschnitts State Management der Flutter-Journey von Coddy. Lektion 24 von 27.

Ein zweiter Bildschirm zeigt, was sich im Warenkorb befindet. Es handelt sich um ein ConsumerWidget, das denselben cartProvider beobachtet, sodass ihm nichts übergeben werden muss: Öffne den Bildschirm, und er liest den Warenkorb selbst aus.

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final cart = ref.watch(cartProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('Your cart')),
      body: ...,
    );
  }
}

Erinnerst du dich an den Provider, der um home herum lag und von einem geöffneten Bildschirm aus nicht gefunden werden konnte? Das kann hier nicht passieren: Der ProviderScope umschließt die gesamte App, sodass jeder Bildschirm jeden Provider erreichen kann.

Eine leere Liste auf einem Bildschirm sieht kaputt aus, also zeige stattdessen einen Satz an: cart.isEmpty ? ... : ... wählt zwischen den beiden aus.

Aufgabe

Mittel

Erstelle den Warenkorb-Bildschirm:

Füge einen CartScreen-ConsumerWidget mit dem Titel Your cart hinzu.
Er listet jedes Produkt im Warenkorb als ListTile mit dem Namen und dem Preis als trailing auf.
Wenn der Warenkorb leer ist, wird stattdessen Your cart is empty angezeigt.
Das Warenkorbsymbol in der oberen Leiste des Shops öffnet ihn.

Probier es selbst

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: const Text('Shop'),
        actions: [
          IconButton(
            icon: Badge(
              label: Text('${cart.length}'),
              isLabelVisible: cart.isNotEmpty,
              child: const Icon(Icons.shopping_cart),
            ),
            onPressed: () {},
          ),
        ],
      ),
      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);
                },
              ),
            ),
        ],
      ),
    );
  }
}