How do I make my gridView scroll take up the whole page in Flutter?

Question

I have a gridView which on scrolling must take up the whole page. It currently only scrolls in the bottom half of the page and looks like shown below.

When I scroll the Grid View containing the elements only the bottom part of the page is scrolling

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        color: DesignCourseAppTheme.nearlyWhite,
        child: PageView(
          scrollDirection: Axis.vertical,
          children: [
            Scaffold(
              backgroundColor: DesignCourseAppTheme.nearlyWhite,
              body: Container(
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: MediaQuery.of(context).padding.top,
                    ),
                    getAppBarUI(),
                    Expanded(
                      child: Container(
                        height: MediaQuery.of(context).size.height,
                        child: Column(
                          children: <Widget>[
                            getCategoryUI(),
                            Flexible(
                              child: getPopularCourseUI(),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Here the gridView is called as:

  Widget getPopularCourseUI() {
    return Padding(
      padding: const EdgeInsets.only(top: 8.0, left: 18, right: 16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Featured Games',
            textAlign: TextAlign.left,
            style: TextStyle(
              fontFamily: "Netflix",
              fontWeight: FontWeight.w800,
              fontSize: 24,
              letterSpacing: 0.27,
              color: HexColor('FF8C3B'),
            ),
          ),
          Flexible(
            child: GamesGridView(
              callBack: () {},
            ),
          )
        ],
      ),
    );
  }

Thank you for your help!

Solution

1. You can wrap your widget which is inside Scaffold body with ListView.

2. Then you should remove all flex widgets from your Column.

3. Your GridView should include

shrinkWrap: true
physics: const ClampingScrollPhysics()

Refer this,

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white, //DesignCourseAppTheme.nearlyWhite,
      child: PageView(
        scrollDirection: Axis.vertical,
        children: [
          Scaffold(
            body: SafeArea(
              child: ListView(
                padding: EdgeInsets.symmetric(horizontal: 30),
                children: <Widget>[
                  getAppBarUI(),
                  getCategoryUI(),
                  getPopularCourseUI(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget getCategoryUI(){
    return SizedBox(
      height: 300,
      child: PageView(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 40.0,horizontal: 30.0),
            child: Material(
              color: Colors.blue,
              elevation: 3.0,
              borderRadius: BorderRadius.circular(20.0),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 40.0,horizontal: 30.0),
            child: Material(
              color: Colors.green,
              elevation: 3.0,
              borderRadius: BorderRadius.circular(20.0),
            ),
          ),
        ],
      ),
    );
  }

  Widget getAppBarUI(){
    return Text(
      'Games for Fun!',
      style: TextStyle(
        fontFamily: "Netflix",
        fontWeight: FontWeight.w800,
        fontSize: 32.0,
        letterSpacing: 0.27,
        color: Colors.red, //HexColor('FF8C3B'),
      ),
    );
  }

  Widget getPopularCourseUI() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          'Featured Games',
          style: TextStyle(
            fontFamily: "Netflix",
            fontWeight: FontWeight.w800,
            fontSize: 24.0,
            letterSpacing: 0.27,
            color: Colors.red, //HexColor('FF8C3B'),
          ),
        ),
        const SizedBox(height: 8.0),
        GamesGridView(
          callBack: () {},
        )
      ],
    );
  }
}

class GamesGridView extends StatelessWidget {
  final VoidCallback callBack;

  const GamesGridView({Key key, this.callBack}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      shrinkWrap: true, //TODO: must be included
      physics: const ClampingScrollPhysics(), //TODO: must be included
      crossAxisCount: 2,
      mainAxisSpacing: 50.0,
      crossAxisSpacing: 50.0,
      children: <Widget>[
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
        RaisedButton(child: Text("Button"), onPressed: () {}),
      ],
    );
  }
}

Here getCategoryUI can scroll horizontally too.

Comments

[J. S.]

Can you clarify what you mean by " a gridView which on scrolling must take up the whole page" and "only the bottom part of the page is scrolling?

[Simran Aswani]

Something like this i.stack.imgur.com/rAYUY.gif

[J. S.]

What do you expect to happen? The top part to scroll up as well, or you don't want any scroll at all?

[Simran Aswani]

top part should scroll up and grid should cover up the whole screen