إضافة أزرار الزيادة والنقصان للكمية

1️⃣ إضافة متغيّر الكمية في الـ State

داخل _ProductDetailsPageState:

class _ProductDetailsPageState extends State<ProductDetailsPage> {
  int _selectedColorIndex = 0;   // لو عندك ألوان
  int _selectedSizeIndex = 0;    // لو عندك مقاسات

  // ✅ الكود المضاف: الكمية
  int _quantity = 1;
JavaScript
2️⃣ ويدجت لبناء زر + رقم + زر –

أضِف هذه الدالة داخل نفس الكلاس:

Widget _buildQuantitySelector(BuildContext context) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      // زر النقصان
      GestureDetector(
        onTap: () {
          setState(() {
            if (_quantity > 1) {
              _quantity--;        // لا ننقص أقل من 1
            }
          });
        },
        child: Container(
          width: 32,
          height: 32,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: Colors.grey.shade400),
          ),
          child: const Icon(Icons.remove, size: 18),
        ),
      ),

      const SizedBox(width: 12),

      // رقم الكمية
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: Colors.grey.shade400),
        ),
        child: Text(
          _quantity.toString(),
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),

      const SizedBox(width: 12),

      // زر الزيادة
      GestureDetector(
        onTap: () {
          setState(() {
            _quantity++;
            // ممكن تضع حد أعلى لو حاب (مثلاً لو فيه مخزون معين)
          });
        },
        child: Container(
          width: 32,
          height: 32,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: Colors.grey.shade400),
          ),
          child: const Icon(Icons.add, size: 18),
        ),
      ),
    ],
  );
}
JavaScript

تقدر تستبدل GestureDetector + Container بـ IconButton لو تحب شكل أبسط.

3️⃣ استدعاء الودجت داخل الـ build

في الـ Column اللي عندك في build، ضعها في المكان اللي يناسبك، مثلًا تحت المقاسات/الألوان وقبل زر الشراء:

Column(
  children: [
    // صورة المنتج
    // الألوان
    // المقاسات

    const Gap(20),
    _buildQuantitySelector(context),   // ✅ هنا
    const Gap(20),

    // مثلاً هنا زر "إضافة إلى السلة"
  ],
)
JavaScript
4️⃣ استخدام الكمية لاحقًا

لما تضيف المنتج إلى السلة:

ElevatedButton(
  onPressed: () {
    // استخدم _quantity مع المنتج
    // cart.add(product: widget.productDetails, quantity: _quantity);
  },
  child: const Text('إضافة إلى السلة'),
),
JavaScript