How to reduce Gridview.builder default height

Question

I have used GridView.builder to show API data with below code.

GridView.builder(
    shrinkWrap: true,
    physics: ScrollPhysics(),
    itemCount: snapshot.data!.items.length,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      childAspectRatio: 1 / .3,
    ),
    itemBuilder: (context, index) {
      return InkWell(
        onTap: () {},
        child: CategoryItem(categoryItem: snapshot.data!.items[index],
        ),
      );
    },
  ),

Here Now my data length is 4 only. when it increases then data will be scrollable. And that working fine But thing is, I want to get resizable height with data length. It takes a default height which is not compatible.

Is there any way to reduce default height or customize it?

Thanks in advance.

Getting below output :

Answer 1

As specified in this response, the key is childAspectRatio. The child height is reduced when you're increasing childAspectRatio.

For instance try to set childAspectRatio: 5

GridView.builder(
    shrinkWrap: true,
    physics: ScrollPhysics(),
    itemCount: snapshot.data!.items.length,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      childAspectRatio: 5,
    ),
    itemBuilder: (context, index) {
      return InkWell(
        onTap: () {},
        child: CategoryItem(categoryItem: snapshot.data!.items[index],
        ),
      );
    },
  ),