عربة التسوق: شاشة العربة

جزء من قسم إدارة الحالة في رحلة Flutter على Coddy. الدرس 24 من 27.

تعرض شاشة ثانية محتويات السلة. وهي ConsumerWidget تراقب cartProvider نفسه، لذا لا تحتاج إلى تمرير أي شيء إليها: ادفعها إلى المكدس، وستقرأ السلة بنفسها.

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

أتتذكر الموفّر الذي كان يحيط بـ home ولم يكن بالإمكان العثور عليه من شاشة مدفوعة إلى المكدس؟ لا يمكن أن يحدث ذلك هنا: يحيط ProviderScope بالتطبيق كله، لذا تصل كل شاشة إلى كل موفّر.

تبدو القائمة الفارغة على الشاشة وكأنها معطّلة، لذا اعرض جملة بدلًا منها: يختار cart.isEmpty ? ... : ... بين الخيارين.

التحدي

متوسط

أنشئ شاشة السلة:

أضف CartScreen من نوع ConsumerWidget بعنوان Your cart.
تعرض كل منتج في السلة على هيئة ListTile يتضمن الاسم، ويعرض السعر في trailing.
عندما تكون السلة فارغة، تعرض Your cart is empty بدلًا من ذلك.
ينقلك رمز السلة في الشريط العلوي للمتجر إليها.

جرّب بنفسك

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