Alışveriş Sepeti: Sepete Ekleme

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

Gerçek bir paylaşılan durum uygulaması oluşturma zamanı: küçük bir mağaza. Önümüzdeki derslerde bu uygulamaya ekleme düğmeleri olan bir ürün listesi, sepet simgesinde bir rozet, toplam tutarı gösteren bir sepet ekranı, ürünleri kaldırma seçeneği ve ödeme özelliği eklenecek. İki ekran, tek sepet.

Sepet paylaşılan durumdur, bu yüzden bir Notifier kullanır. Durumu sepetteki ürünlerin listesidir ve başlangıçta boştur. Öğrendiğin gibi, her değişiklik yeni bir liste ayarlar:

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

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

Ürün listesinin kendisi hiç değişmez, bu yüzden dosyanın en üstünde sıradan bir const listesi olarak kalır. Yalnızca değişen şey için bir sağlayıcı gerekir.

Görev

Orta

Ekleme düğmelerinin sepeti doldurmasını sağlayın:

Durumu başlangıçta boş olan bir List<Product> olan ve add(Product product) yöntemine sahip bir Cart notifier'ı yazın.
final cartProvider = NotifierProvider<Cart, List<Product>>(Cart.new); ekleyin.
Her satırın düğmesi, o satırdaki ürünü eklesin.
Üst çubuk sepetteki ürün sayısını gösterir: Shop (0), Shop (1)...

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

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