إضافة المقاسات للمنتج

فكرة المقاسات (S – M – L – XL …) هي نفس فكرة الألوان تماماً،
لكن بدل ما نعرض مربعات ألوان، نعرض أزرار أو مربعات نصية فيها المقاس.

المبدأ نفسه:

  • المقاسات تُخزَّن داخل Model في قائمة
  • تُعرض في صفحة التفاصيل
  • يُحدَّد المقاس المختار (state)
  • يتغير شكله عند الضغط

وسأشرح لك كيف تطبّقها خطوة خطوة 👇

✅ 1) تعديل الـ Model (نفس فكرة الألوان)

لو تود تضيف المقاسات للمنتج:

class Product {
  final String title;
  final String image;
  final String description;
  final List<int> colors;     // ← خيار الألوان (اختياري)
  final List<String> sizes;   // ← خيار المقاسات (اختياري)

  const Product({
    required this.title,
    required this.image,
    required this.description,
    this.colors = const [],
    this.sizes = const [],   // 👈 القيمة الافتراضية قائمة فارغة
  });
}
JavaScript
✅ 2) إضافة المقاسات في ملف الـ data

مثال:

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

ولو منتج ما عنده مقاسات (مثل ساعة أو جوال)
تترك sizes فارغة تلقائيًا.

✅ 3) عرض المقاسات في صفحة التفاصيل (كما نفعل مع الألوان)

نضيف state:

int _selectedSizeIndex = 0;
JavaScript
✅ 4) إنشاء Widget لعرض المقاسات (نفس أسلوب الألوان لكن نصوص)

أضف هذه الأسطر داخل ProductDetailsPage:

Widget _buildSizeSelector(BuildContext context) {
  final sizes = widget.productDetails.sizes;

  if (sizes.isEmpty) {
    return const SizedBox.shrink(); // لو ما فيه مقاسات لا تعرض شيء
  }

  return Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: List.generate(sizes.length, (index) {
      final bool isSelected = index == _selectedSizeIndex;

      return GestureDetector(
        onTap: () {
          setState(() {
            _selectedSizeIndex = index;
          });
        },
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 200),
          margin: const EdgeInsets.symmetric(horizontal: 6),
          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(
              width: isSelected ? 2.5 : 1,
              color: isSelected
                  ? Theme.of(context).colorScheme.primary
                  : Colors.grey.shade400,
            ),
            color: isSelected
                ? Theme.of(context).colorScheme.primary.withOpacity(0.15)
                : Colors.white,
          ),
          child: Text(
            sizes[index],
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: isSelected
                  ? Theme.of(context).colorScheme.primary
                  : Colors.black,
            ),
          ),
        ),
      );
    }),
  );
}
JavaScript
✅ 5) استدعاء الودجت في مكان مناسب من الصفحة

بعد الألوان مثلًا:

_buildColorSelector(context),
Gap(20),
_buildSizeSelector(context),
Gap(20),
JavaScript
💡 الفرق بين المقاسات والألوان؟
الخاصيةالألوانالمقاسات
الشكلمربع ملوّنمربع أو زر يحتوي نص
البياناتList<int> (ARGB)List<String>
الهدفيغير شكل المنتجيحدد خيارات الثياب

لكن الـ logic واحد 🔥