CODEWITHSUNDEEP
flutterflutter-layout
Uros
Uros

Reputation: 323

How to render ListView(as Row) inside ListView(as Column)?

I'm trying to render list of 6 teams. Each team has five players, and design is that we have something like this

team 1 (column) team 1 name (row) team1-player1, team1-player2, team1-player3, team1-player4, team1-player5 (row),

team 2 (column) team 2 name (row) team2-player1, team2-player2, team2-player3, team2-player4, team2-player5 (row),

etc etc.

My app looks like this:

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: <Widget>[
          Text(teams[index]['name']),
          ListView.builder(
            shrinkWrap: true,
            itemCount: teams[index]['players'].length,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (context, playerIndex) {
              return PlayerCard(
                  player: teams[index]['players'][playerIndex]);
            },
          ),
        ],
      ),
    );
  },
);

}

With this setup i have 6 rows instead of 2. Each player has it's own row, or takes full width of the row. I'm not sure. I've tried adding second ListView.builder inside Row, but no luck. Some box constrains errors i am unable to fix.

And yes, PlayerCard's build

Widget build(BuildContext context) {
return Padding(
  padding: EdgeInsets.all(5.0),
  child: Column(
    children: <Widget>[
      Image.network(
        player['photo'],
        width: 100,
        height: 150,
      ),
      Text(player['name']),
      Text(player['nick']),
    ],
  ),
);

}

Any advice?

Thanks!

Upvotes: 0

Views: 296

Answers (1)

Ovidiu
Ovidiu

Reputation: 8714

The ListView widget has a scrollDirection property which indicates the axis on which the list entries are laid out. The default is Axis.vertical which is why your inner ListView lays the PlayerCard widgets vertically.

If you want all the PlayerCard widgets to fit within the screen's width, then the inner ListView should be replaced with a Row, and each PlayerCard should be wrapped with Flexible or Expanded to make them equal width within the Row.

If instead you want to scroll horizontally through a team's PlayerCard widgets, simply change the scrollDirection to Axis.horizontal and remove the physics property to let it scroll normally. You will likely want to wrap the ListView itself with Expanded so that it doesn't overflow from the Column.

Upvotes: 1

Related Questions