ListView.builder – claudSoft

🔹 أولًا: `ListView.builder`

✅ التعريف:

ListView.builder تستخدم لبناء قائمة ديناميكية يتم إنشاؤها عند الحاجة (on demand). وهي مناسبة للقوائم الطويلة جدًا أو التي تأتي من API أو قاعدة بيانات.

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

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

Dart

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

الخاصية	النوع	الشرح
`itemCount`	`int`	عدد العناصر المراد عرضها
`itemBuilder`	`Function`	دالة تُرجع الـ Widget لكل عنصر حسب الفهرس
`scrollDirection`	`Axis`	اتجاه التمرير `Axis.vertical` أو `Axis.horizontal`
`reverse`	`bool`	لعكس الترتيب (من الأسفل للأعلى أو العكس)
`physics`	`ScrollPhysics`	لتخصيص سلوك التمرير (مثل Bouncing, Clamping…)
`shrinkWrap`	`bool`	إذا كانت القائمة داخل عنصر لا يملك ارتفاع محدد مثل `Column`
`padding`	`EdgeInsets`	لتحديد المسافات حول القائمة

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

عندما يكون لديك عدد كبير من العناصر.
عندما تأتي البيانات من API أو قاعدة بيانات.
عندما لا تحتاج فواصل بين العناصر.

✅ مثال عملي:

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return Card(
      child: ListTile(
        leading: Icon(Icons.star),
        title: Text('عنصر رقم ${index + 1}'),
      ),
    );
  },
);

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return Card(
      child: ListTile(
        leading: Icon(Icons.star),
        title: Text('عنصر رقم ${index + 1}'),
      ),
    );
  },
);

Dart

ListView.separated(
          separatorBuilder: (context, index) => Divider(),
          itemCount: students.length,
          itemBuilder: (context, index) {
            return ListTile(
              contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              leading: CircleAvatar(
                backgroundColor: Colors.teal,
                child: Text("${students[index]["old"]}"),
              ),
              trailing: Icon(
                Icons.arrow_forward_ios,
                size: 16,
                color: Colors.grey,
              ),
              title: Text(
                "Name: ${students[index]["name"]}",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              subtitle: Text(
                "Age: ${students[index]["age"]}",
                style: TextStyle(color: Colors.grey[600]),
              ),
              tileColor: Colors.grey[100],
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
              onTap: () {},
            );

ListView.separated(
          separatorBuilder: (context, index) => Divider(),
          itemCount: students.length,
          itemBuilder: (context, index) {
            return ListTile(
              contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              leading: CircleAvatar(
                backgroundColor: Colors.teal,
                child: Text("${students[index]["old"]}"),
              ),
              trailing: Icon(
                Icons.arrow_forward_ios,
                size: 16,
                color: Colors.grey,
              ),
              title: Text(
                "Name: ${students[index]["name"]}",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              subtitle: Text(
                "Age: ${students[index]["age"]}",
                style: TextStyle(color: Colors.grey[600]),
              ),
              tileColor: Colors.grey[100],
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
              onTap: () {},
            );

Dart

🔹 أولًا: ListView.builder

✅ التعريف:

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

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

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

✅ مثال عملي:

🔹 أولًا: `ListView.builder`