Flutter - Responsive Image mapping?

Question

Good Evening,

I have been searching for many hours and can not find a solution. I have set a full screen image and with a Stack I have Positioned several GestureDetectors. I have succeeded to be able to press on a GestureDetector and call a Function. The problem is that when the screen size changes, either to a new or older phone then the Image responds and covers the full screen but the Positioned() of course stay at the same place, thus the Image mappings are not correct any more.

Is there a way to make the Positioned be responsive? or Maybe a total different way achieving the desired outcome?

Please help me :)

class Overview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double sh = MediaQuery.of(context).size.height;
    double sw = MediaQuery.of(context).size.width;
    return Scaffold(
      drawer: AppDrawer(),
      body: Stack(
        children: <Widget>[
          Container(
            height: sh,
            width: sw,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/images/ang7.png'),
                    fit: BoxFit.cover)),
          ),
          Positioned(
            left: 10,
            top: 50,
            child: IconButton(
              icon: Icon(Icons.menu),
              iconSize: 30,
              color: Colors.white,
              onPressed: () => Scaffold.of(context).openDrawer(),
            ),
        Positioned(
        left: left,
        top: top,
        child: GestureDetector(
          // child: Icon(Icons.add_circle),
          onTap: () => Navigator.push(context, MaterialPageRoute(
            builder: (context) {
              return Amenities(
                tText[page][0],
                tText[page][1],
                tText[page][2],
              );
            },
          )),
          child: Container(
            height: 35,
            width: 50,
            color: Colors.blue,
          ),
        ));
          ),

Maybe post a couple of screen shots showing what it should look like and what happens when you use a smaller and/or larger device. — GrahamD, Apr 04 '20 at 08:36
Sure, I will do that as soon as possible. With my first screen, I have placed the Positioned where I wanted exactly. When I switch screen to another size, then the Positioned are displayed at the same left and top but because the screen has a different size they are not places 'correctly' on the Image as before. — Biobrolly, Apr 04 '20 at 09:11
Ok, probably don't need the screenshots. Don't think I know of a solution straight out of the box, maybe others do. You could try experimenting with MediaQuery.of to determine the size of the device (height and width) and then use those values to scale the Positioned widgets postion parameters up or down from your 'baseline' sizes. In theory that should (may) match how the background image has been scaled. Would probably need to scale the size of the Positioned widgets as well. — GrahamD, Apr 04 '20 at 10:10

GrahamD · Answer 1 · 2020-04-04T13:36:18.230

Posting my comment as an answer just in case it works and there are no better answers provided. Please up vote and mark as answered if it does. :-)

You could try experimenting with MediaQuery.of to determine the size of the device (height and width) and then use those values to scale the Positioned widgets position parameters up or down from your 'baseline' sizes. In theory that should (may) match how the background image has been scaled. Would probably need to scale the size of the Positioned widgets as well.

Update regarding your comment:

Not really. What I mean is that you would need to run MediaQuery.of on the device that you are happy with the UI layout, and record that device's width and height. You then use this width and height in your app and compare these 'baseline' values with what values you get when you run the app on other devices.

So: Divide other-device-width by baseline-device-width to get your width scaling factor. Divide other-device-height by baseline-device-height to get your height scaling factor.

Then use these scaling factors to 'scale' the Positioned widgets width (positioned-widget-width multiplied by width-scaling-factor) and height (positioned-widget-height multiplied by height-scaling-factor) and position on the screen (you would have to play around with the positioning values).

Sounds messy but it is just a bit of simple math.

Like I say, might not work or might not be the most elegant solution. There are so many different devices out there you will never really be able to completely test this. Might need to rethink you UI. Maybe some other people have ideas around that.

Thanks for your input. I thought that maybe the Image scales or descales from the centre of it. So I tried to have (Positioned(left: Mediaquery.of(context).size.width / 2 - lets say 100) and the same for the height, but this did not work as well. Is this what you mean? thank you — Biobrolly, Apr 04 '20 at 11:46
Sounds really like a good and doable Idea. Will test it out and let you know! Thank you! — Biobrolly, Apr 04 '20 at 14:14

Flutter - Responsive Image mapping?

1 Answers1