flutter - Dynamically get height of items in GridView.builder

Question

I'm retrieving data from a server. The data is served up using GridView.builder. Each grid contained a Listview. The length of the listview is unknown because it depends on the number of items returned from the server. I need each grid to be the same height(so probably not able to use the staggered grid ) irrespective of the number of items retrieved and don't want an overflow from the listview items. For this to work I need to know the height of the grid with the most amount of items(the highest grid). I know the height can be adjusted with the ratio childAspectRatio. Here's a minimum example that you can use in the dartpart. Basically in this example the items overflow in the "long column". I'd like to able to add items to the column without causing an overflow and keeping the grids the same height.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
          home: Scaffold(
        body: Center(
            child: GridView.builder(
          primary: false,
          padding: const EdgeInsets.all(20),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 10, mainAxisSpacing: 10, crossAxisCount: 3),
          itemCount: 6,
          itemBuilder: (BuildContext context, int index) {
            Widget widget;
            switch (index) {
              case 0:
                widget = Container(
                  padding: const EdgeInsets.all(8),
                  child: Column(
                    children: [
                      const Text('Long Column'),
                      const Text('Long Column'),
                      const Text('Long Column'),
                      const Text('Long Column'),
                      const Text('Long Column'),
                      const Text('Long Column'),
                    
                    ],
                  ),
                  color: Colors.teal[100],
                );
                break;
              case 1:
                widget = Container(
                  padding: const EdgeInsets.all(8),
                  child: const Text('Short Column'),
                  color: Colors.teal[200],
                );
                break;
              case 2:
                widget = Container(
                  padding: const EdgeInsets.all(8),
                  child: const Text('Short Column'),
                  color: Colors.teal[300],
                );
                break;
              case 3:
                widget = Container(
                  padding: const EdgeInsets.all(8),
                  child: const Text('Short Column'),
                  color: Colors.teal[400],
                );
                break;
              case 4:
                widget = Container(
                  padding: const EdgeInsets.all(8),
                  child: const Text('Short Column'),
                  color: Colors.teal[500],
                );
                break;
              default:
                widget = Container(
                  padding: const EdgeInsets.all(8),
                  child: const Text('Short Column'),
                  color: Colors.teal[600],
                );
            }
            return widget;
          },
        )),
      ),
    );
  }
}

question from:https://stackoverflow.com/questions/65941909/dynamically-get-height-of-items-in-gridview-builder

Answer 1

GridView.count( crossAxisCount: 2, children: List.generate(12, (index) { return Expanded(child:container()); })),

This will work