How to render list inside list in flutter? - list

Question

I'm creating an flutter app which should show list of teams, and each team is an object with items like
name: string
players: array of
name: string
so it looks like this
List teams = [
{
'name': 'Team one',
'players': [
{
'name': 'Team one player one',
},
{
'name': 'Team one player two',
},
{
'name': 'Team one player three',
},
]
},
{
'name': 'Team two',
'players': [
{
'name': 'Team two player one',
},
{
'name': 'Team two player one',
},
{
'name': 'Team two player three',
},
]
},
];
Further, in my code, I'm iterating through all teams with ListView, like this
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: renderTeams(teams),
),
);
}
and renderTeams() looks like this:
Widget renderTeams(List teams) {
return ListView.builder(
itemCount: teams.length,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: [
Text(teams[index]['name']),
Row(
children: <Widget>[
Flexible(
child: PlayerCard(
player: teams[index]['players'][0],
),
),
Flexible(
child: PlayerCard(
player: teams[index]['players'][1],
),
),
Flexible(
child: PlayerCard(
player: teams[index]['players'][2],
),
),
],
)
],
),
);
},
);
}
This works well, everything gets rendered accordingly.
However, I'd like to, instead adding each player separately, iterate through each's team players, so my renderTeams() would look like this:
Widget renderTeams(List teams) {
return ListView.builder(
itemCount: teams.length,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: [
Text(teams[index]['name']),
renderPlayers(teams[index]['players'])
],
),
);
},
);
}
and renderPlayers() looks like this:
renderPlayers(players) {
return Row(children: players.map((player) => {
Flexible(
child: PlayerCard(
player: player,
),
)
}).toList());
}
This is where my troubles begin, as I'm getting errors like
type 'List<dynamic>' is not a subtype of type 'List<Widget>'
And I've googled around, but other responses, tried to fix types, but that leads me into infinite loop of trying to fix errors i do not understand.
Anyone got any hint? Thanks in advance

Answer 1

Remove { }
renderPlayers(players) {
return Row(children: players.map((player) =>
Flexible(
child: PlayerCard(
player: player,
),
)
).toList());
}
Explanation
=> means return. => { ... } means returning a function (dynamic). That's why it was detected as List<dynamic>

Answer 2

Use Spread Operator [...]
The best solution for this type of problem is the Spreed Operator [...]. The spread operator combines two or more list instances. It also extends a collection's elements of a such as a list.
You can use it with Columns, Rows or Listview.
Like this:
// List
final variableValuesList = [
VariablesWithValues(
title: 'a',
value: 1,
),
VariablesWithValues(
title: 'b',
value: 1,
),
];
/// using inside column
Column(
children: [
///getting values from the list through spread operator
...variableValuesList.map((item) => Text(${item.title} = ${item.value})
).toList(),