ListView.separated

✅ التعريف:

ListView.separated تشبه builder ولكنها تسمح بإضافة فاصل (separator) بين كل عنصرين.

✅ الصيغة العامة:

ListView.separated(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
  separatorBuilder: (context, index) => Divider(),
);

ListView.separated(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
  separatorBuilder: (context, index) => Divider(),
);

✅ أهم الخصائص:

✅ الاستخدام المثالي:

• عندما تحتاج إلى فواصل بين العناصر.
• عند عرض قائمة بإطار معين.
• لعرض بيانات بصريًا مفصولة (مثل الرسائل أو الإشعارات).

✅ مثال عملي:

ListView.separated(
  itemCount: 5,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.message),
      title: Text('رسالة ${index + 1}'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider(
      color: Colors.grey,
      thickness: 1,
    );
  },
);

ListView.separated(
  itemCount: 5,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.message),
      title: Text('رسالة ${index + 1}'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider(
      color: Colors.grey,
      thickness: 1,
    );
  },
);

✅ الفرق بين builder و separated

🟢 نصائح وأفضل الممارسات:

1. استخدم builder إذا لم تحتاج إلى فاصل.
2. استخدم separated عندما تحتاج إلى فاصل بين العناصر بشكل دائم.
3. ضع shrinkWrap: true عندما تكون القائمة داخل Column أو أي عنصر غير محدد الارتفاع.
4. اجعل itemCount واضح لتجنب أخطاء RangeError.
5. تجنب جعل القوائم الكبيرة داخل SingleChildScrollView، فهذا يهدر الذاكرة.