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

Question

I have a widget tree like this:

SingleChildScrollView
   Column
     Container
       ListView(or GridView)

the problem is that when my wid

Answer 1

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

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

Answer 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(),
  ],
),

Answer 3

I am using nested Listviews and this helped me. Add these lines in all of your ListviewBuilders

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

Answer 4

Set primary to false in your ListView.

ListView(
   primary: false,
),

That should prevent it from scrolling separately.

Answer 5

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

Answer 6

Why it is happening?

It happens because Column and ListView both take the entire space of screen individually which is there default behavior.

How to solve the problem?

To solve the above problem we have to disable scrolling of Listview, This can be possible by shrinkWrap and physics property

shrinkWrap:true - It forces ListView to take only the required space, not the entire screen.

physics: NeverScrollableScrollPhysics() - It disables scrolling functionality of ListView, which means now we have only SingleChildScrollView who provide the scrolling functionality.

Code:

SingleChildScrollView
   Column
     Container
        ListView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                //...
                )

https://medium.com/flutterworld/flutter-problem-listview-vs-column-singlechildscrollview-43fdde0fa355

Note: Above ListView behaviour will be also applied for GridView.