The return type 'List<ListTile>' isn't a 'Widget', as required by the closure's context

Viewed 86

I am trying to use ListView.builder and map together. Can i use them together?? I checked the map code without listView.builder and it is working fine. when i use this code with listview.builder to get index value i am getting error. where is the mistake?

final nameAndRollNo = [
    {
      'name': 'Name 1',
      'details': [
        {'Roll No.': 'F101', 'age': 20,},
      ]
    },
    {
      'name': 'Name 2',
      'details': [
        {'Roll No.': 'F102', 'age': 25,},
      ]
    },
```
ListView.builder(
        itemCount: nameAndRollNo.length,
        itemBuilder: (context, index) {
          return (nameAndRollNo[index]['details'] as List<Map<String, dynamic>>)
              .map((value) {
            return ListTile(
              leading: Icon(Icons.person),
              title: Text('Any Name'),
              subtitle: Text(value['Roll No.']),
              trailing: Icon(Icons.delete),
            );
          }).toList();
        },
      ),
1 Answers

You can return single widget from itemBuilder, but while you are performing map and creating List<ListTile>, means it can't return list of widget. If you like to wrap them as List, you can wrap items with Column widget.

itemBuilder: (context, index) {
  return Column(
    children: (nameAndRollNo[index]['details']
            as List<Map<String, dynamic>>)
        .map((value) {
      return ListTile(
        leading: Icon(Icons.person),
        title: Text('Any Name'),
        subtitle: Text(value['Roll No.']),
        trailing: Icon(Icons.delete),
      );
    }).toList(),
  );
Related