I want to show a grid of things using the code below. They look good on normal screens, but on the huge foldable screen, the items’ height gets longer unexpectedly. I don’t know why. Please help!!

Widget _buildSubcategoryContainer(List<ProductCategory> categories){
  if (categories.isEmpty){
    return const SizedBox();
  }
  return Container(
    margin: const EdgeInsets.only(left: 10, right: 10),
    padding: const EdgeInsets.only(top: 5, bottom: 5),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(10),
      boxShadow: const [ Global.slightShadow ],
    ),
    child: GridView.builder(
      shrinkWrap: true,
      itemCount: categories.length,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5),
      itemBuilder: (BuildContext context, int index) => _buildSubCategoryItem(categories[index]),
    ),
  );
}

Widget _buildSubCategoryItem(ProductCategory category){
  String defaultCategoryImage = category.image == null || category.image!.isEmpty ? "https://world-street.oss-cn-beijing.aliyuncs.com/ICON/%E4%B8%87%E8%AF%AF.png" : category.image!;
  return GestureDetector(
    onTap: () { RouteUtils.showFromRight(SearchProductResultPage(category: category)); },
    child: Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        CachedNetworkImage(imageUrl: defaultCategoryImage, width: 40, height: 40),
        const SizedBox(height: 3,),
        Text(category.name, style: const TextStyle(fontSize: 12)),
      ]
    )
  );
}

I have tried wrap the SubCategoryItem with a fixed height Container or SizedBox with height like 50. But it doesn’t work at all.

Widget _buildSubCategoryItem(ProductCategory category){
  String defaultCategoryImage = category.image == null || category.image!.isEmpty ? "https://world-street.oss-cn-beijing.aliyuncs.com/ICON/%E4%B8%87%E8%AF%AF.png" : category.image!;
  return Container(
    height: 50,
    color: Colors.blue,
    child: GestureDetector(
      onTap: () { RouteUtils.showFromRight(SearchProductResultPage(category: category)); },
      child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CachedNetworkImage(imageUrl: defaultCategoryImage, width: 40, height: 40),
            const SizedBox(height: 3,),
            Text(category.name, style: const TextStyle(fontSize: 12)),
          ]
      ),
    )
  );

Normal screen result:

Foldable screen result: