如何让我的 gridView 滚动占据 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!

Answer 1

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.

Answer 2

If I understood your issue correctly, using a CustomScrollView with SliverAppBar and a SliverGrid should do what you want:

class GridViewIssue extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          title: Center(child: Text('Banner')),
          expandedHeight: 250.0,
        ),
        SliverGrid(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.teal[100 * (index % 9)],
                child: Text('grid item $index'),
              );
            },
            childCount: 8
          ),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2
          )
        )
      ],
    );
  }
}