Preventing unlimited horizontal size of viewport-CodePudding

I'd like to create the layout shown in the picture below. This shows up fine:

Column( Row, ListView()))

While this renders errors:

Column( Row, Row( ListView(), Column ))

As soon as I replace the inner ListView() with Row( ListView(), Column ), nothing shows up and I get varying error messages, based on various changes I did.

Most often, I see a 'viewport has unlimited horizontal size'.

I guess Listview to be the source of the problem. That said, I'm no aware how to fix it.

Furthermore, I did find various hints on SO, but none fixed the problem.

How do I fix the problem?

CodePudding user response：

put the ListView inside a Container And give it height/width

code

Column(
    children: [
      Row(
        children: [],
      ),
      Row(
        children: [
          Container(
              height: 100,
              width: 100,
              child: ListView(
                children: [
                  Text(
                      "1 C/G")
                ],
              )),
          Column(
            children: [],
          )
        ],
      )
    ],
  ),

CodePudding user response：

Both Row and Column have a mainAxisSizeparameter where you can set it to MainAxisSize.min so they will take their children's size. Now, about the ListView, there is a shrinkWrap parameter that makes it so its max size will be its children's size. Another idea might be using a Flexible widget around the ListView, it does almost the same as Expanded, but the difference is: Expanded forces the child to occupy the remaining space, while Flexible allows the children to have any given size smaller than that, and that's because of its fit parameter that by default is FlexFit.loose.