GridView overflowing inside SingleChildScrollView in 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