flutter problem: how to make Gridview card responsive?

Question

Here I uploaded two screenshot first screenshot of my mobile and second one of client's screen shot. I want to make rensponsive gridview card as actuall showing in first screenshot I want like this UI but when I open another mobile then It becoming three cards but I want only two card as responsive, when i am using aspectRatio then is my mobile work perfect but another mobile my gridview card being to large from my mobile actuall card. how to do it solve . please help me.

this is my Gridview code.

GridView.builder(
                    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                      maxCrossAxisExtent: 200,
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 10,
                      mainAxisExtent: 267,
                    ),
                    itemCount: searchHHList.length,
                    padding: EdgeInsets.only(
                      top: 16,
                      left: 12,
                      right: 12,
                    ),
                    // childAspectRatio: 0.59,
                    physics: ScrollPhysics(),
                    primary: false,
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int index) {

                      return HeroCard(
                          healthHeroesListData: searchHHList[index]);
                    }),

This is my card page.

import 'package:cwc/constants/constants.dart';
import 'package:cwc/ui/Hero/components/apply_session.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class HeroCard extends StatefulWidget {
  final healthHeroesListData;

  const HeroCard({Key? key, this.healthHeroesListData}) : super(key: key);

  @override
  State<HeroCard> createState() => _HeroCardState();
}

class _HeroCardState extends State<HeroCard> {
  @override
  Widget build(
    BuildContext context,
  ) {
    return Builder(builder: (context) {
      return Container(
        height: 244,
        width: 174,
        decoration: BoxDecoration(
          color: const Color(0xFFC691D3).withOpacity(0.25),
          borderRadius: const BorderRadius.all(
            Radius.circular(10),
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                height: 145,
                width: 260,
                decoration: BoxDecoration(
                      color: widget.healthHeroesListData['packages'][0]["name"]
                                  .toString()
                                  .toLowerCase() ==
                              "starter"
                          ? Color(0xff69C583).withOpacity(.2)
                          : widget.healthHeroesListData['packages'][0]["name"]
                                      .toString()
                                      .toLowerCase() ==
                                  "explorer"
                              ? Color(0xFFC691D3).withOpacity(0.2)
                              : Color(0xFFF6931E).withOpacity(0.2),

                borderRadius: BorderRadius.circular(10),
                  image:
                  
                  DecorationImage(
                    image: NetworkImage(  imgBaseUrl + '${widget.healthHeroesListData['image']}'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              SizedBox(
                height: 15,
              ),
              Row(
                children: [
                  Expanded(
                    child: Text(
                      '${widget.healthHeroesListData['name']}',
                      style: GoogleFonts.poppins(
                          fontWeight: FontWeight.w600,
                          fontSize: 14,
                          color: Color(0xFF444444)
                      ), overflow: TextOverflow.ellipsis,
                      textAlign: TextAlign.center,
                      maxLines: 1,),
                  ),
                ],
              ),
              
        Padding(
                  padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
                  child: Text(
                    '${widget.healthHeroesListData['areaOfMentoring'].join(', ')}',
                    overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.center,
                    maxLines: 1,
                    style: GoogleFonts.poppins(
                      fontSize: 12,
                      color: widget.healthHeroesListData['packages'][0]["name"]
                                  .toString()
                                  .toLowerCase() ==
                              "starter"
                          ? Color(0xff69C583)
                          : widget.healthHeroesListData['packages'][0]["name"]
                                      .toString()
                                      .toLowerCase() ==
                                  "explorer"
                              ? Color(0xFFC691D3)
                              : Color(0xFFF6931E),
                    ),
                  ),
                ),
                ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: widget.healthHeroesListData['packages'][0]["name"]
                                  .toString()
                                  .toLowerCase() ==
                              "starter"
                          ? MaterialStateProperty.all(Color(0xff69C583))
                          : widget.healthHeroesListData['packages'][0]["name"]
                                      .toString()
                                      .toLowerCase() ==
                                  "explorer"
                              ? MaterialStateProperty.all(Color(0xFFC691D3))
                              : MaterialStateProperty.all(Color(0xFFF6931E)),
                     
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18.0),
                          // side: BorderSide(color: Colors.teal, width: 0.0),
                        ),
                      ),
                    ),
                    onPressed: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => ApplySession(
                                  healthHeroesListData: widget.healthHeroesListData)));
                    },
                    child: Text('View Details'))
            ],
          ),
        ),
      );
    });
  }
}

this is my mobile (redmi 5a)'s screenshot.

this is another mobile's screenshot

Answer 1

I would suggest using the SliverGridDelegateWithFixedCrossAxisCount widget or method and set it to 2. The delegate you are currently using defines only the extent to which your items are laid out which means they'll be squeezed in the available space as much as that can fit. Then just restore the spacing

gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 3/2,