how to place a listview inside a SingleChildScrollView but prevent them from scrolling separately?
DartFlutterDart Problem Overview
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?
Dart Solutions
Solution 1 - Dart
You could use your first widget-tree and apply the following changes:
- In every
ListView
andGridView
setshrinkWrap: true
. This fixes the error message you were getting. - In every
ListView
andGridView
setphysics: NeverScrollableScrollPhysics()
. This disables the scroll on them and new you can only scroll on theSingleChildScrollView
Solution 2 - Dart
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 - Dart
For me, setting primary to false and shrinkWrap to true worked.
ListView(
primary: false,
shrinkWrap: true,
),
Solution 4 - Dart
Set primary
to false
in your ListView
.
ListView(
primary: false,
),
That should prevent it from scrolling separately.
Solution 5 - Dart
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
.
Solution 6 - Dart
I am using nested Listviews
and this helped me. Add these lines in all of your ListviewBuilders
ListView(
shrinkWrap: true,
primary: false,
),
Solution 7 - Dart
This will work like a charm.
Column(
children: itemList.map((item) {
return Text(item);
}).toList(),
),
Solution 8 - Dart
using this inside listview works fine for me.
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,