How to add a listview inside a row?

Question

I have a layout that looks like this

Now, I want the scores on the right side to be of dynamic size such that the score list is scrollable, but I tried a few ways, none of which could achieve what I wanted.

This was my initial attempt to do it

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        TeamTitleHorizontal(teamName: teamName, teamLogoUrl: teamLogoUrl),
        Expanded(
          child: ListView.separated(
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, int i) {
                return Container(
                  decoration: isWinners[i] ? textUnderlineDecoration : null,
                  child: Text(
                    scores[i],
                    style: scoreStyle,
                  ),
                );
              },
              separatorBuilder: (BuildContext context, int i) {
                return spaceX(extra: 18.0);
              },
              shrinkWrap: true,
              itemCount: scores.length),
        ),
      ],
    )

On top of this I tried wrapping the parents and grand parents with SizedBox and giving them some hard coded width but still the entire widget was not visible.

How can I achieve this result?

Answer 1

You need to provide height on horizontal ListView.

Expanded(
  child: SizedBox(
    height: 40,//your value
    child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (BuildContext context, int i) {