Restricting the size of widgets programmatically

user_433392 0
Viewed 88

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?

Update 1

While the right Column() may be fixed width, the ListView() should take all remaining space of the screen [= availableWidth - WidhtOf(Column())].

enter image description here

flutter-layout flutter
2 Answers

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: [],
          )
        ],
      )
    ],
  ),
user_93252390

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.

user_95768700
Related