Warenkorb: Das Badge

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

Shops zeigen den Warenkorb als Symbol mit einer kleinen Zahl darauf, einem Badge. Flutter bietet dafür ein Widget: Badge zeichnet sein label in einer roten Blase in der Ecke seines child:

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

isLabelVisible blendet die Blase aus, wenn der Wert false ist. Bei einem leeren Warenkorb wird nur das Symbol angezeigt, was dezenter ist als eine 0. cart.isNotEmpty ist true, wenn die Liste mindestens ein Element enthält.

Das Badge beobachtet denselben cartProvider wie zuvor der Titel. Jedes Widget kann das tun, egal wo es sich befindet.

Aufgabe

Einfach

Verschiebe die Anzahl vom Titel in ein Badge:

Der Titel lautet wieder Shop.
Füge der actions-Liste der oberen Leiste einen Warenkorb-IconButton hinzu, mit Icons.shopping_cart in einem Badge, das die Anzahl der Produkte anzeigt.
Blende die Anzahl im Badge aus, wenn der Warenkorb leer ist.

Die Schaltfläche tut noch nichts; als Nächstes kommt der Warenkorb-Bildschirm.

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