Flutter gridview fill remaining height on screen

Question

For the life of me I am not able to get the gridview.count to use the available height. I have tried with the MediaQuery.of(context).size.height and width and tried with SafeArea but no luck.

Everything is contained in a Column. The black bar is a container with a set height of 150 pixels. The grayblue bar is also a container with a set height of 50 pixels.

code:

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            DefaultTextStyle(
              style: const TextStyle(color: Colors.white, fontSize: 40.0),
              child: Container(
                width: double.infinity,
                height: 120.0,
                child: FittedBox(
                  fit: BoxFit.contain,
                  child: Center(
                    child: Text(results),
                  ),
                ),
                color: Colors.black,
              ),
            ),
            DefaultTextStyle(
              style: const TextStyle(
                color: Colors.white54,
                fontSize: 5.0,
              ),
              child: Container(
                width: double.infinity,
                height: 50.0,
                child: FittedBox(
                  fit: BoxFit.contain,
                  child: Center(
                    child: Text(history),
                  ),
                ),
                color: Colors.blueGrey,
              ),
            ),
            Expanded(
              child: GridView.count(
                padding: const EdgeInsets.all(2.0),
                crossAxisCount: 4,
                mainAxisSpacing: 2.0,
                crossAxisSpacing: 2.0,
                children: List.generate(
                  chars.length,
                  (index) {
                    return Material(
                      color: Colors.blueAccent,
                      child: InkWell(
                        // splashColor: Colors.amber,
                        onTap: () {
                          setState(() {
                            
                          });
                        },
                        child: Center(
                          child: Text(chars[index]),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Answer 1

GridView children size depends on screen size.

Child size screenWidth/crossAxisCount and the default aspect ratio is 1 that's why default view is square. I will prefer calculating height for GridView then provide available height on top two containers.

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.purpleAccent,
    body: LayoutBuilder(
      builder: (context, constraints) {
        const crossAxisCount = 4;

        final gridViewHeight =
            (constraints.maxWidth / crossAxisCount) * 5; //5 for rows

        final double heightWithoutGridView =
            constraints.maxHeight - gridViewHeight;

        return Column(
          children: [
            Container(
              width: constraints.maxWidth,
              height: heightWithoutGridView * .75,
              color: Colors.black,
            ),
            Container(
              width: constraints.maxWidth,
              height: heightWithoutGridView * .25,
              color: Colors.grey,
            ),
            Expanded(
              child: GridView.count(
                crossAxisCount: crossAxisCount,
                children: List.generate(
                  44,
                  (index) => Container(
                    color: Colors.amber,
                  ),
                ),
              ),
            )
          ],
        );
      },
    ),
  );
}

Answer 2

Try using the Expanded widget provided by flutter. So, wrap your gridview with Expanded. Expanded will take all the available space of the screen.