how to place a listview inside a SingleChildScrollView but prevent them from scrolling separately?

I have a widget tree like this:

SingleChildScrollView
   Column
     Container
       ListView(or GridView)

the problem is that when my widget tree is like above, it gives me error of

NEEDS PAINT

so I change my widget tree like this:

Column
     Container
       ListView(or GridView)

but in this situation the ListView or GridView part scrolls separately, and I want the whole widget tree to scroll. how do you think I can achieve it?

Solution 1:

You could use your first widget-tree and apply the following changes:

1. In every ListView and GridView set shrinkWrap: true. This fixes the error message you were getting.
2. In every ListView and GridView set physics: NeverScrollableScrollPhysics(). This disables the scroll on them and new you can only scroll on the SingleChildScrollView

Solution 2:

As suggested by other answers, you can do that by setting shrinkWrap: true, physics: NeverScrollableScrollPhysics(), but building a shrinkwrapped listview is more expensive than building a normal listview, I think it will be a good idea to use a map() on the list.

Column(
  children: <Widget>[
    ...itemList.map((item) {
       return Text(item);
    }).toList(),
  ],
),

Solution 3:

For me, setting primary to false and shrinkWrap to true worked.

ListView(
   primary: false,
   shrinkWrap: true,
),

Solution 4:

Set primary to false in your ListView.

ListView(
   primary: false,
),

That should prevent it from scrolling separately.