عربة التسوق: الإضافة إلى العربة

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

حان وقت بناء تطبيق حقيقي بحالة مشتركة: متجر صغير. خلال الدروس القادمة، سنضيف إليه قائمة منتجات بأزرار للإضافة، وشارة على أيقونة سلة التسوق، وشاشة للسلة تعرض الإجمالي، وطريقة لإزالة العناصر، وخاصية لإتمام الشراء. شاشتان، وسلة واحدة.

السلة هي الحالة المشتركة، لذا ستستخدم Notifier. حالتها هي قائمة المنتجات الموجودة في السلة، وتبدأ فارغة. كل تغيير يُنشئ قائمة جديدة، كما تعلمت:

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

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

قائمة المنتجات نفسها لا تتغير أبدًا، لذا تبقى قائمة const عادية في أعلى الملف. وحدها البيانات التي تتغير تحتاج إلى موفّر.

التحدي

متوسط

اجعل أزرار الإضافة تملأ عربة التسوق:

اكتب مُبلِّغًا باسم Cart تكون حالته List<Product>، وفارغة في البداية، وله طريقة add(Product product).
أضف final cartProvider = NotifierProvider<Cart, List<Product>>(Cart.new);
يضيف زر كل صف المنتج الخاص به.
يعرض الشريط العلوي عدد المنتجات في عربة التسوق: Shop (0)، Shop (1)...

جرّب بنفسك

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