How do I equalize the heights of GridView and Column in Row?

Question

I want their heights (yellow Column and GridView) to be equal and c1, c2, c3, c4 to be proportional to GridView.

I've tried; I wrapped with IntrinsicHeight. Like this;

IntrinsicHeight (child: Row (children:[
                                   Column (),
                                   GridView (),
                                       ]
                            ))

If I wrap the GridView with a Container and give the height; c1, c2, c3, c4 is proportional to the height. But the height of the GridView also changes. We don't know the height of the GridView.

The other I tried; I wrapped the Row of GridView with Expanded. Even though c1, c2, c3, c4 are distributed proportionally, the height is not equal to the GridView 's height.

How do I get the expected result shown in the image?

Full code below:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Menu Screen"),
        ),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(child: Container()),
                Expanded(
                    flex: 22,
                    child: Container(
                      color: Colors.red,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [Text("abcd"), Text("abcd"), Text("abcd")],
                      ),
                    ))
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Text("c1"),
                        Text("c2"),
                        Text("c3"),
                        Text("c4"),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 22,
                  child: Container(
                    child: GridView(
                      shrinkWrap: true,
                      children: [
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                      ],
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        childAspectRatio: 1,
                        crossAxisSpacing: 2,
                        mainAxisSpacing: 2,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ));
  }
}

Answer 1

Try adding crossAxisAlignment: CrossAxisAlignment.stretch to your row It should stretch all items in the row to the height of maximum of it.

Same goes for columns if you want to stretch items width.

Answer 2

In your example GridView is taking all the available space because you wrapped it with Expanded. So you can’t control it’s width and height. The solution for the problem would be getting the width (or the height) of each square in your GridView. You gave your GridView a flex of 22, so the width of one square will be (screen width*(22/23)-2*2)/3. (This 2*2 is because of spaces in your GridView) You can get the screen’s width by adding this line of code before the return Scaffold line:

var my_width = MediaQuery.of(context).size.width;

Then create a variable yellow_container_height and give it a value of (my_width*(22/23)-2*2)/3

After that wrap all your texts (c1, c2, c3, c4) with Containers

Then just add a height property to your yellow Containers (c1, c2, c3, c4) with the value of yellow_container_height

Final code should look something like this:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var my_width = MediaQuery.of(context).size.width;
    var yellow_container_height = (my_width*(22/23)-2*2)/3;
    return Scaffold(
        appBar: AppBar(
          title: Text("Menu Screen"),
        ),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(child: Container()),
                Expanded(
                    flex: 22,
                    child: Container(
                      color: Colors.red,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [Text("abcd"), Text("abcd"), Text("abcd")],
                      ),
                    ))
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Container(
                          height: yellow_container_height + 2, // these 2 are because of spaces in your GridView
                          child: Text("c1")),
                        Container(
                          height: yellow_container_height + 2,
                          child: Text("c2")),
                        Container(
                          height: yellow_container_height + 2,
                          child: Text("c3")),
                        Container(
                          height: yellow_container_height, // here we don't have 2 because this is the last square in our GridView
                          child: Text("c4")),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 22,
                  child: Container(
                    child: GridView(
                      shrinkWrap: true,
                      children: [
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                        Container(color: Colors.blueGrey,),
                      ],
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        childAspectRatio: 1,
                        crossAxisSpacing: 2,
                        mainAxisSpacing: 2,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ));
  }
}