How to make Positioned.fill responsive inside stack?

Question

I am using positioned.fill top value to adjust my text along with image. I am using mediaQuery for responsiveness. When I adjust it on larger mobile screen, then it cause same issue on smaller screen.

This is my stack code:

 Stack(children: <Widget>[
            GestureDetector(
              onTap: (() => Navigator.of(context).push(
                    Transitions(
                        transitionType: TransitionType.fade,
                        curve: Curves.bounceInOut,
                        duration: const Duration(milliseconds: 500),
                        reverseCurve: Curves.bounceOut,
                        widget: detailinvest(title)),
                  )),
              child: Container(
                // height: 260,
                height: MediaQuery.of(context).size.height / 3,
                padding: const EdgeInsets.all(8),
                child: ClipRRect(
                    borderRadius: BorderRadius.circular(20.0),
                    child: Image.network(
                      "https://arzenafees.com/wp-content/uploads/2021/06/Invest_Rudn_Enclave.jpg",
                      fit: BoxFit.cover,
                    )),
              ),
            ),
            Positioned.fill(
              // top: 255,
              top: MediaQuery.of(context).size.width * 0.5,
              child: Align(
                  alignment: Alignment.bottomCenter,
                  child: ListTile(
                    title: Text(
                      'Rudn Enclave',
                      style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                          fontFamily: 'Roboto'),
                    ),
                    subtitle: Row(
                      children: [
                        Icon(
                          Icons.location_on,
                          color: Constants.colorMain,
                        ),
                        Expanded(
                          child: Text(
                            'Adiala Road, Rawalpindi, Rawalpindi Cantonment, Rawalpindi District, Punjab, 46600, Pakistan',
                            style: TextStyle(
                              fontSize: MediaQuery.of(context).size.width / 45,
                            ),
                          ),
                        ),
                      ],
                    ),
                  )),
            ),
          ]),

Screenshot:

Note: This UI was working good on smaller screen

Edit: My GridView code:

body: GridView.count(
        primary: false,
        padding: const EdgeInsets.all(8),
        crossAxisSpacing: 12,
        mainAxisSpacing: 22,
        crossAxisCount: 2,
        childAspectRatio: 0.6,
        children: <Widget>[

Answer 1

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(8),
  crossAxisSpacing: 10,
  mainAxisSpacing: 20,
  crossAxisCount: 2,
  childAspectRatio: 0.5,
  children: <Widget> [
    Column(
      children: <Widget>[
        GestureDetector(
          onTap: (() => Navigator.of(context).push(
            Transitions(
              transitionType: TransitionType.fade,
              curve: Curves.bounceInOut,
              duration: const Duration(milliseconds: 500),
              reverseCurve: Curves.bounceOut,
              widget: detailinvest(title)),
           )),
          child: Container(
            height: MediaQuery.of(context).size.height / 3,
            padding: const EdgeInsets.all(8),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20.0),
              child: Image.network(
                "https://arzenafees.com/wp-content/uploads/2021/06/Invest_Rudn_Enclave.jpg",
                fit: BoxFit.cover,
              )
            ),
          ),
        ),
        ListTile(
          title: Text(
            'Rudn Enclave',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
              fontFamily: 'Roboto',
              color: Colors.black
            ),
          ),
          subtitle: Row(
            children: [
              Icon(Icons.location_on, color: Colors.red,),
              Expanded(
                child: Text(
                  'Adiala Road, Rawalpindi, Rawalpindi Cantonment, Rawalpindi District, Punjab, 46600, Pakistan',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: MediaQuery.of(context).size.width / 45,
                  ),
                ),
              ),
            ],
          ),
        ),
      ]
    ),
  ]
),