How to set Custom height for Widget in GridView in Flutter?

In Flutter, GridView is a powerful and flexible widget used for creating two-dimensional lists. By default, each child widget in GridView has a consistent size, but we can customize the height of each child widget through various methods.

Method 1: Using GridView.custom

This is a flexible approach that allows developers to customize the size of grid cells. By using GridView.custom and providing a custom SliverGridDelegate, we can precisely control the layout of each grid cell. For example:

dart
GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 4,
    childAspectRatio: (itemWidth / itemHeight),
  ),
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) {
      return MyCustomWidget(data: myData[index]);
    },
    childCount: myData.length,
  ),
)

In the above code, the childAspectRatio parameter sets the aspect ratio. If you need each child widget to have a different height, adjust this ratio based on your specific requirements.

Method 2: Using GridView.builder with Container

Another approach involves using GridView.builder and controlling the height of each item via the height property of Container. For example:

dart
GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemBuilder: (context, index) {
    return Container(
      height: myHeights[index], // Custom height
      child: MyCustomWidget(data: myData[index]),
    );
  },
  itemCount: myData.length,
)

Here, myHeights is a list containing all custom heights. While this method is straightforward, it may disrupt the uniformity of the layout because grid cells can have varying heights.

Method 3: Using StaggeredGridView

For a more flexible waterfall layout, consider the third-party library flutter_staggered_grid_view. This library provides StaggeredGridView, enabling highly adaptable grid layouts with varying heights:

dart
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: myData.length,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: CircleAvatar(
          backgroundColor: Colors.white,
          child: Text('$index'),
        ),
      ),
  ),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

In this example, staggeredTileBuilder defines different sizes for each grid cell, where index.isEven ? 2 : 1 indicates that grid cells with even indices have a height twice that of cells with odd indices.

Each method has its pros and cons, and the choice depends on your specific requirements and project context.