How to render list inside list in flutter?

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>