Alışveriş Sepeti: Rozet

Coddy'nin Flutter Journey'sinin Durum Yönetimi bölümünün bir parçası. Ders 23 / 27.

Mağazalar, sepeti üzerinde küçük bir sayı bulunan bir simgeyle, yani bir rozetle gösterir. Flutter'da bunun için bir bileşen vardır: Badge, label öğesini child öğesinin köşesindeki kırmızı bir baloncukta gösterir:

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

isLabelVisible, false olduğunda baloncuğu gizler. Sepet boşsa sade simge gösterilir; bu, 0 göstermekten daha sakindir. Listede en az bir öğe olduğunda cart.isNotEmpty değeri true olur.

Rozet de başlığın kullandığı cartProvider'ı izler. Herhangi bir bileşen bunu, nerede olursa olsun yapabilir.

Görev

Kolay

Sayıyı başlıktan bir rozete taşı:

Başlık Shop olarak kalsın.
Üst çubuğun actions bölümüne bir sepet IconButton ekle; içine ürün sayısını gösteren bir Badge içinde Icons.shopping_cart yerleştir.
Sepet boşken rozetteki sayıyı gizle.

Düğme henüz bir şey yapmıyor; sırada sepet ekranı var.

Kendin dene

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