شرح استخدام ويدجت ListView.separated في فلاتر

ListView.separated(
  itemCount: _names.length,
  separatorBuilder: (BuildContext context, int index) {
    return Divider(
      height: 1,
      color: Colors.grey,
    );
  },
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(_names[index]),
    );
  },
)

ListView.separated(
  itemCount: _names.length,
  // ...
)

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

ListView.separated(
  itemCount: _names.length,
  separatorBuilder: (BuildContext context, int index) {
    return Divider(
      height: 1,
      color: Colors.grey,
    );
  },
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(_names[index]),
    );
  },
)

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final List<Map<String, dynamic>> _dataList = [
    {'name': 'أحمد', 'age': 25, 'position': 'مطور'},
    {'name': 'محمد', 'age': 30, 'position': 'مصمم'},
    {'name': 'علي', 'age': 20, 'position': 'محلل'},
    {'name': 'أميرة', 'age': 28, 'position': 'مسوق'},
    {'name': 'سارة', 'age': 21, 'position': 'مدير'},
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter ListView.separated',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter ListView.separated'),
        ),
        body: ListView.separated(
          itemCount: _dataList.length,
          separatorBuilder: (BuildContext context, int index) {
            return const Divider(
              height: 1,
              color: Colors.grey,
              thickness: 3,
            );
          },
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              leading: const Icon(Icons.person),
              title: Text(_dataList[index]['name']),
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('العمر: ${_dataList[index]['age']}'),
                  Text('المنصب: ${_dataList[index]['position']}'),
                ],
              ),
              trailing: const Icon(Icons.arrow_forward),
              onTap: () {
                // يمكن إضافة أي عملية تريد تنفيذها عند الضغط على العنصر هنا
              },
            );
          },
        ),
      ),
    );
  }
}