Flutter : SingleChildScrollView doesn't work with columns and grid view. Why? - flutter

Question

I can't scroll to see my lower grid view. Why is that? What should I change to make this work? Please help!!!
Thank you in advance.
Scaffold(
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Text('GridView 1'),
GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
children: List.generate(
9,
(index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
);
},
),
),
Text('GridView 2'),
GridView.builder(
itemCount: list_item.length,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
// width: 150,
// height: 150,
);
},
),
],
),
),
),
);
Thank you for helping me in flutter.

Answer 1

It actually does work, just not the way you need it.
The problem is that GridView itself is a scrollable widget too. So when you try to scroll the page, it actually tries to scroll those GridViews and not the SingleChildScrollView.
To disable GridView scrolling ability - you need to add one more parameter.
GridView.count(
physics: NeverScrollableScrollPhysics(),
...
),

Answer 2

Try this:
Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[]

Answer 3

multiple gridview scrollable
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text('GridView 1'),
Container(
height: 400,
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
primary: false,
children: List.generate(
20,
(index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
);
},
),
),
),
Text('GridView 2'),
Container(
height: 400,
child: GridView.builder(
itemCount: 20,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
// width: 150,
// height: 150,
);
},
),
),
],
),
),
);