Flutter: How do I disable scrolling for a GridView widget, but have scrolling enabled for the page as a whole?

Question

I'm building an app where I have a page which gives information about a specific trading card. I want the page to be scrollable, but I also want to have a grid on the page, with each grid cell showing one data point. I made the grid using GridView.count().

My problem is that instead of have a page which I can scroll through, the top half of the page stays static, while the grid is scrollable. How do I make the grid static, while the rest of the page scrollable? I intend to have more data below this grid as well, and I want to user to be able to scroll to see all of it, with the grid being a static component of the page.

Here's my code:

import 'package:flutter/material.dart';
import 'package:pokehub/size_config.dart';
import 'package:pokemon_tcg/pokemon_tcg.dart';

class CardInfo extends StatefulWidget {
  PokemonCard card;

  CardInfo({required this.card});

  @override
  _CardInfoState createState() => _CardInfoState();
}

class _CardInfoState extends State<CardInfo> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.grey[900],
        appBar: AppBar(
          title: Text(
            "Card Profile",
            style: TextStyle(
                color: Colors.white,
                fontFamily: 'Blinker',
                fontSize: SizeConfig.blockSizeVertical * 3),
          ),
          backgroundColor: Colors.red,
          elevation: 0.0,
        ),
        body: Align(
          alignment: Alignment.center,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                height: SizeConfig.blockSizeVertical * 3,
              ),
              Text(
                "Set: " +
                    widget.card.set.name +
                    "  //  Number: " +
                    widget.card.number,
                style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Blinker',
                    fontSize: SizeConfig.blockSizeVertical * 2),
              ),
              SizedBox(
                height: SizeConfig.blockSizeVertical * 3,
              ),
              Hero(
                tag: 'card' + widget.card.id,
                child: Image.network(
                  widget.card.images.large,
                  height: SizeConfig.blockSizeVertical * 30,
                ),
              ),
              SizedBox(
                height: SizeConfig.blockSizeVertical * 2,
              ),
              Text(
                widget.card.name,
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Blinker',
                  fontSize: SizeConfig.blockSizeVertical * 5,
                ),
              ),
              SizedBox(
                height: SizeConfig.blockSizeVertical * 2,
              ),
              Expanded(
                child: GridView.count(
                  mainAxisSpacing: SizeConfig.blockSizeVertical * 4,
                  crossAxisSpacing: SizeConfig.blockSizeHorizontal * 4,
                  crossAxisCount: 3,
                  children: [
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Subtypes",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.subtypes
                                  .map((e) => e.type)
                                  .join(", "),
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "HP",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.hp!,
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Type",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.types.map((e) => e.type).join(", "),
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Weakness",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.weaknesses
                                  .map((e) => e.type + e.value)
                                  .join(", "),
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Resistance",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.resistances
                                  .map((e) =>
                                      e.type == "" ? "None" : e.type + e.value)
                                  .join(", "),
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(
                          vertical: SizeConfig.blockSizeVertical * 2,
                          horizontal: SizeConfig.blockSizeHorizontal * 2),
                      decoration: BoxDecoration(
                        border: Border.all(
                          color: Colors.white,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                      child: Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              "Retreat Cost",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: 'Blinker',
                                  fontSize: SizeConfig.blockSizeVertical * 3,
                                  fontWeight: FontWeight.bold),
                            ),
                            Text(
                              widget.card.convertedRetreatCost.toString(),
                              style: TextStyle(
                                color: Colors.white,
                                fontFamily: 'Blinker',
                                fontSize: SizeConfig.blockSizeVertical * 2,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
[enter image description here][1]

Answer 1

You can provide physics: NeverScrollableScrollPhysics() on GridView to disable scroll effect. If you want scrollable as secondary widget use primary: false,

To have Full Page scrollable, you can use body:SingleChildScrollView(..) or better using body:CustomScrollView(..)