GridView.builder

GridView.builder() هو ويدجت (Widget) في Flutter يُستخدم لعرض شبكة (Grid) من العناصر بشكل ديناميكي، أي أنه يقوم ببناء العناصر عند الحاجة فقط (lazy loading)، وهذا يجعله مثاليًا عندما يكون لديك عدد كبير من العناصر أو عندما لا تعرف عددها مسبقًا.

✅ الفرق بين GridView.count() و GridView.builder()
الخاصيةGridView.count()GridView.builder()
عدد العناصرثابتغير معروف مسبقًا
الأداءأقل كفاءة إذا كان عدد العناصر كبيرًاأفضل أداء لأنه يبني العناصر عند الحاجة فقط
مناسبة لـعدد محدود من العناصرعدد كبير أو غير معروف من العناصر
البناءدفعة واحدةحسب الحاجة (Lazy Loading)
🧱 البنية العامة (Syntax):
GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,       // عدد الأعمدة
    mainAxisSpacing: 10.0,   // المسافة الرأسية بين العناصر
    crossAxisSpacing: 10.0,  // المسافة الأفقية بين العناصر
    childAspectRatio: 1.0,   // نسبة العرض إلى الارتفاع
  ),
  itemCount: items.length,   // عدد العناصر في الشبكة
  itemBuilder: (context, index) {
    return SomeWidget(item: items[index]); // بناء عنصر معين
  },
);
Dart
🔍 شرح الخصائص بالتفصيل:
1. gridDelegate ✅ (إجباري)

يحدد شكل وتخطيط الشبكة. أشهر الخيارات:

📌 SliverGridDelegateWithFixedCrossAxisCount

  • يحدد عدد الأعمدة بالضبط (crossAxisCount).
  • مناسب لشبكات منظمة ذات عدد أعمدة ثابت.
خصائصه:
الخاصيةشرح
crossAxisCountعدد الأعمدة
mainAxisSpacingالمسافة بين العناصر عموديًا
crossAxisSpacingالمسافة بين العناصر أفقيًا
childAspectRatioنسبة العرض إلى الطول (مثل 1.0 تعني مربع، 2.0 تعني ضعف العرض عن الطول)
2. itemCount
  • عدد العناصر في الشبكة.
  • مثل: items.length.
3. itemBuilder
  • دالة تقوم ببناء كل عنصر في الشبكة.
  • تأخذ context و index.
  • تعيد ويدجت تمثل العنصر في ذلك الموضع.

مثال:

itemBuilder: (context, index) {
  return Card(
    child: Center(child: Text('عنصر ${index + 1}')),
  );
}
Dart
💡 أماكن الاستخدام
الحالةلماذا GridView.builder؟
عرض الصور من الإنترنتلأنه يمكنه تحميل الصور تدريجيًا مع التمرير (lazy loading)
متجر إلكترونيلعرض المنتجات على شكل شبكة ديناميكية
عرض البطاقات التعليميةلتوفير شبكة قابلة للتمدد للعناصر
واجهات متعددة الأعمدةلأنه مرن جدًا من حيث التصميم وعدد الأعمدة
📦 مثال عملي كامل:
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final List<String> items = List.generate(50, (index) => 'عنصر ${index + 1}');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GridView.builder مثال')),
        body: Padding(
          padding: const EdgeInsets.all(10.0),
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              childAspectRatio: 1,
            ),
            itemCount: items.length,
            itemBuilder: (context, index) {
              return Container(
                color: Colors.teal[100 * ((index % 8) + 1)],
                child: Center(
                  child: Text(
                    items[index],
                    style: TextStyle(fontSize: 16),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}
Dart
📌 ملحوظات إضافية
  • يدعم physics لتحديد نوع التمرير (مثل BouncingScrollPhysics()).
  • يدعم scrollDirection (أفقي أو رأسي).
  • يدعم shrinkWrap لتقليل الحجم إذا كان داخل عنصر آخر قابل للتمرير.
  • يمكن وضعه داخل Expanded أو Flexible.
✅ ملخص الفوائد
الفائدةلماذا مهمة؟
الأداء العالييبني العناصر فقط عند الحاجة
المرونةتحكم كامل في عدد الأعمدة ونسبة الأبعاد
قابلية التخصيصتخصيص التنسيق والمسافات بسهولة
دعم التمرير الداخلييمكن وضعه داخل SingleChildScrollView أو Column
مثالي لقوائم كبيرة جدًايوفر أداء ممتاز دون استهلاك كبير للذاكرة