صفحة التصنيفات

صفحة (Screen) للتصنيف تُعرض فيها فقط المنتجات اللي تنتمي لهذا التصنيف.

رح نمشي بهالخطوات:

  1. نضيف حقل category في ProductModel
  2. نجهّز البيانات (نربط كل منتج بتصنيف معيّن)
  3. نعمل صفحة CategoryProductsPage
  4. من أي مكان (الصفحة الرئيسية مثلاً) نروح لصفحة التصنيف مع تمرير اسم/ID التصنيف
1️⃣ تعديل الـ ProductModel وإضافة التصنيف

خلينا نفترض عندك Product شبيه بهذا (عدّل حسب موديلك):

class Product {
  final String title;
  final String image;
  final String description;
  final List<int> colors;
  final List<String> sizes;
  final double price;
  final PhoneSpecs? specs;

  // ✅ الجديد: التصنيف
  final String category; // مثال: "phones", "clothes", "watches"

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

بإمكانك تخليها String بسيطة أو لاحقًا تحوّلها لـ enum، بس كبداية String ممتازة.

أمثلة للتصنيفات:

  • "phones"
  • "laptops"
  • "clothes"
  • "watches"

المهم تستخدم نفس القيمة في كل مكان.

2️⃣ ربط كل منتج بتصنيفه في ملف الـ data

في ملف البيانات (مثال):

final List<Product> products = [
  Product(
    title: 'هاتف Galaxy S24',
    image: 'assets/images/s24.png',
    description: 'هاتف قوي بشاشة عالية الدقة...',
    price: 3500.0,
    colors: [0xFF000000, 0xFFFFFFFF],
    sizes: [],
    specs: PhoneSpecs(
      cpu: 'Snapdragon 8 Gen 3',
      ram: '12 GB',
      storage: '256 GB',
      battery: '4500 mAh',
      camera: '50 MP + 10 MP + 12 MP',
      screen: '6.8" AMOLED, 120Hz',
    ),
    category: 'phones', // ✅ هذا جوال
  ),

  Product(
    title: 'تيشيرت رجالي',
    image: 'assets/images/tshirt.png',
    description: 'قميص قطن 100%',
    price: 120.0,
    colors: [0xFF000000, 0xFFFFFFFF],
    sizes: ['S', 'M', 'L', 'XL'],
    specs: null,
    category: 'clothes', // ✅ هذا ملابس
  ),

  Product(
    title: 'ساعة يد أنيقة',
    image: 'assets/images/watch.png',
    description: 'ساعة كلاسيكية ضد الماء',
    price: 250.0,
    colors: [0xFF000000],
    sizes: [],
    specs: null,
    category: 'watches', // ✅ هذا ساعات
  ),
];
JavaScript

الآن كل منتج يعرف لأي تصنيف ينتمي.

3️⃣ إنشاء صفحة تعرض منتجات تصنيف معيّن

ننشئ صفحة جديدة مثلًا category_products_page.dart:

import 'package:flutter/material.dart';
import '../models/productModel.dart';
import '../data/products_data.dart'; // الملف اللي فيه قائمة products

class CategoryProductsPage extends StatelessWidget {
  final String categoryId; // مثل "phones"
  final String categoryTitle; // لعرضه في الـ AppBar

  const CategoryProductsPage({
    super.key,
    required this.categoryId,
    required this.categoryTitle,
  });

  @override
  Widget build(BuildContext context) {
    // ✅ فلترة المنتجات حسب التصنيف
    final List<Product> filteredProducts = products
        .where((product) => product.category == categoryId)
        .toList();

    return Scaffold(
      appBar: AppBar(
        title: Text(categoryTitle),
      ),
      body: filteredProducts.isEmpty
          ? const Center(
              child: Text('لا توجد منتجات في هذا التصنيف حالياً'),
            )
          : GridView.builder(
              padding: const EdgeInsets.all(12),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,       // عدد الأعمدة في الشبكة
                childAspectRatio: 0.7,   // تناسب العرض/الارتفاع للكارد
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
              ),
              itemCount: filteredProducts.length,
              itemBuilder: (context, index) {
                final product = filteredProducts[index];

                return GestureDetector(
                  onTap: () {
                    // هنا تروح لصفحة التفاصيل اللي عندك
                    // Navigator.push(... ProductDetailsPage(productDetails: product));
                  },
                  child: Card(
                    elevation: 3,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Column(
                      children: [
                        Expanded(
                          child: Image.asset(
                            product.image,
                            fit: BoxFit.cover,
                            width: double.infinity,
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            product.title,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            textAlign: TextAlign.center,
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                        Text(
                          '${product.price.toStringAsFixed(2)} ر.س',
                          style: const TextStyle(
                            color: Colors.green,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        const SizedBox(height: 8),
                      ],
                    ),
                  ),
                );
              },
            ),
    );
  }
}
JavaScript

الفكرة هنا:

  • نستقبل categoryId (مثل "phones")
  • نفلتر: products.where((p) => p.category == categoryId).toList()
  • نعرض النتيجة في GridView أو ListView حسب تصميمك
4️⃣ الانتقال إلى صفحة التصنيف من الصفحة الرئيسية

افترض عندك صفحة رئيسية فيها قائمة تصنيفات (أيقونات أو كروت):

// مثال بسيط لتصنيف واحد
GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const CategoryProductsPage(
          categoryId: 'phones',       // 👈 لازم يطابق اللي في الـ products
          categoryTitle: 'الهواتف',
        ),
      ),
    );
  },
  child: Container(
    padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12),
      color: Colors.blue.shade50,
    ),
    child: const Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.phone_android, size: 32),
        SizedBox(height: 8),
        Text('الهواتف'),
      ],
    ),
  ),
),
JavaScript

تكرر نفس الفكرة لباقي التصنيفات:

  • categoryId: 'clothes' + categoryTitle: 'الملابس'
  • categoryId: 'watches' + categoryTitle: 'الساعات'
    إلخ…
الفكرة العامة باختصار
  1. كل منتج لازم يعرف تصنيفه → حقل category في الـ model
  2. صفحة التصنيف تستقبل نوع التصنيف → categoryId
  3. تفلتر المنتجات باستخدام where
  4. تعرض فقط النتيجة المفلترة في Grid/List