GridView overflowing inside SingleChildScrollView in flutter - flutter

Question

When I try to put a GridView inside a Column which is the child of SingleScrollChildView I get bottom overflowed by a few thousand pixels. shrinkWrap in GridView is set to true. Also scrollphysics is set to NeverScrollableScrollPhysics(). I am at wits ends trying to make this GridView scroll with SingleChildScrollView. Here is my code for Widget build(BuildContext context). Any help would be appreciated.
return WillPopScope(
child: Column(
children: <Widget>[
// the fixed container
SizedBox(
height: 80,
width: double.infinity,
child: Container(
decoration: BoxDecoration(
color: Colors.blue.shade800,
),
),
),
//Scrolling Section of the Page
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column( // Column to hold all the vertical elements including the gridview
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
// Carousal slider in a sized box of height 250
SizedBox(
height: 250,
width: double.maxFinite,
child: _adSlider(),
),
// A Text Container
Container(
padding: EdgeInsets.symmetric(vertical: 15),
child: Text("GridView Heading"),
),
// gridview starts here
GridView.count(
shrinkWrap: true,
addAutomaticKeepAlives: true,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
crossAxisCount: 2,
children: List.generate(20, (index) {
return productCard(index);
}),
)
],
),
),
],
),
onWillPop: () async => true);
Everything is fine until I add the GridView.
Edit: Adding a long SizedBox in place of GridView also throws the overflow error.
This is the error
A RenderFlex overflowed by 603 pixels on the bottom.
The relevant error-causing widget was
Column
lib\…\home\ui_home.dart:24
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Answer 1

Wrap the Gridview with Expanded widget
Here’s how I did:
return Center(
child: Container(
child: Column(
children: [
Expanded(
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.0,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: snapshot.data.documents
.map((doc) => _myGridTile(doc))
.toList(),
),
),
],
),
),
);
Ignore the snapshot.data, that was from Firestore, you can place your List there