Flutter- Gridview inside listview issue - flutter

Question

I want to show Carousel slider and listview inside gridview and want to scroll complete page, I am able to scroll parent listview but when I go down can't able to scroll.
Code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
centerTitle: true,
),
body: ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
new SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Image(
image:
AssetImage('assets/images/onboarding1.png'),
),
),
);
},
);
}).toList(),
),
),
new SizedBox(height: 20.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
],
),
);
}

Answer 1

The best thing to use for your case is Slivers, it will allow you to scroll through both the ListView and GridView together smoothly.
An example is as follows:
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
centerTitle: true,
),
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Text('hello'),
),
);
},
);
}).toList(),
),
),
),
SliverToBoxAdapter(
child: SizedBox(height: 20.0),
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
}, childCount: 5),
)
],
),
);
}
}

Answer 2

Add physics: PageScrollPhysics(), for both ListView.builder() & GridView.count()
Code:
ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
new SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Image(
image: AssetImage('assets/images/onboarding1.png'),
),
),
);
},
);
}).toList(),
),
),
new SizedBox(height: 20.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
physics: PageScrollPhysics(),
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
physics: PageScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
],
);