مجموع سعر المنتجات

1️⃣ أولًا: تأكد أن الـ Product فيه سعر

في الـ ProductModel (مثال):

class Product {
  final String title;
  final String image;
  final String description;
  final List<int> colors;
  final List<String> sizes;

  // ✅ الكود المضاف: السعر للوحدة
  final double price;

  const Product({
    required this.title,
    required this.image,
    required this.description,
    this.colors = const [],
    this.sizes = const [],
    required this.price,   // 👈 لا تنس إضافتها هنا
  });
}
JavaScript

وفي ملف الـ data:

Product(
  title: 'قميص رجالي',
  image: 'assets/images/shirt.png',
  description: 'قميص قطن عالي الجودة',
  colors: [0xFF000000, 0xFFFFFFFF],
  sizes: ['S', 'M', 'L', 'XL'],
  price: 120.0, // 👈 السعر لوحدة واحدة
),
JavaScript
2️⃣ في صفحة التفاصيل: استخدم السعر * الكمية

داخل State:

class _ProductDetailsPageState extends State<ProductDetailsPage> {
  int _selectedColorIndex = 0;
  int _selectedSizeIndex = 0;
  int _quantity = 1;

  // ✅ دالة أو getter تحسب السعر الإجمالي
  double get totalPrice => widget.productDetails.price * _quantity;
JavaScript
3️⃣ عرض السعر + السعر الإجمالي في الواجهة
مثال: تحت الكمية مباشرة نعرض السعر

داخل الـ Column في build (بعد _buildQuantitySelector):

_buildQuantitySelector(context),
const Gap(16),

// ✅ الكود المضاف: عرض السعر الإجمالي
Text(
  'السعر للوحدة: ${widget.productDetails.price.toStringAsFixed(2)} ر.س',
  style: const TextStyle(fontSize: 14, color: Colors.grey),
),
const Gap(4),
Text(
  'الإجمالي: ${totalPrice.toStringAsFixed(2)} ر.س',
  style: const TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
),
const Gap(20),
JavaScript

كل ما تغيّر _quantity (عن طريق أزرار + / -)
يتم استدعاء setState → يعاد بناء الواجهة → يتحدث totalPrice تلقائيًا ✨

4️⃣ تذكير سريع بأزرار الكمية (مهم للربط)

أهم شيء أن أزرار + و – تستخدم setState:

onTap: () {
  setState(() {
    if (_quantity > 1) _quantity--;
  });
}
JavaScript

و

onTap: () {
  setState(() {
    _quantity++;
  });
}
JavaScript

وبما أن totalPrice يعتمد على _quantity، فالسعر المعروض يتحدث مباشرة.

5️⃣ نموذج مختصر للجزء المهم
class _ProductDetailsPageState extends State<ProductDetailsPage> {
  int _quantity = 1;

  double get totalPrice => widget.productDetails.price * _quantity;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // صورة، عنوان، وصف، ألوان، مقاسات ...

          _buildQuantitySelector(context),
          const Gap(16),
          Text(
            'السعر للوحدة: ${widget.productDetails.price.toStringAsFixed(2)} ر.س',
          ),
          const Gap(4),
          Text(
            'الإجمالي: ${totalPrice.toStringAsFixed(2)} ر.س',
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),

          // زر إضافة للسلة مثلاً
        ],
      ),
    );
  }
}
JavaScript