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 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?

Answer 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

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: itemList.map((item) {
       return Text(item);
    }).toList()
),

Answer 3

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

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

Answer 4

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(),
                //...
                )

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

Answer 5

Set primary to false in your ListView.

ListView(
   primary: false,
),

That should prevent it from scrolling separately.

Answer 6

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

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

Answer 7

using this inside listview works fine for me.

physics: NeverScrollableScrollPhysics(),

shrinkWrap: true,

Answer 8

This will work like a charm.

Column(
children: itemList.map((item) {
   return Text(item);
}).toList(),
),

Answer 9

I used the combination of all three (primary: false, shrinkWrap: true, physics: NeverScrollableScrollPhysics()) and it just worked:

   SingleChildScrollView(

      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            child: ListView.builder(primary: false, shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemCount: movies.length ,itemBuilder: (context, index) {
              Movie movie = movies[index];
              return Container(
                child: Card(
                  color: Colors.greenAccent,
                  key: ValueKey(movie.title),
                  child: ListTile(
                    title: Text(movie.title),
                    subtitle: Text(movie.duration),
                    trailing: IconButton(
                      icon: Icon(Icons.favorite),
                      color: movies[index].isFav ? Colors.red : Colors.white,
                      onPressed: () {
                        context.read<MovieProvider>().updateFav(!movies[index].isFav, movie);
                      },
                    ),
                  ),
                ),
              );
            }),
          )
        ],
      ),
    )