如何在颤振中使堆栈响应？

Question

I'd like to implement a geografic map with a position indicator using the Stack widget in flutter. My problem is that when I want to indicate a point P of my map, I specify the coordinates (x,y) but these coordinates are valid only when use a phone with a certain dimensions, but if I use a phone with a different display dimensions it will also changes the position of my position indicator that will not indicate my point P. My question is: using the Stack widget is correct for this type of problem? If not what can I use?

Here a snippet of my code:

          Stack(
                children: [
                  Image.asset(
                    'assets/images/map.png',
                     height: mediaQuery.size.height * 0.5,
                     width: mediaQuery.size.width,
                  ),
                  if (x != null && y != null)
                    Align(
                      heightFactor: 2,
                      widthFactor: 2,

                      alignment: Alignment(x, y),
                      child: Image.asset(
                        'assets/images/picker.png',
                        scale: 1.4,
                      ),
                    ),
                ],

Answer 1

You need to put in a scaling factor with the new X and Y coordinates that have been scaled from the original image. Also, I tend to think that using a Positioned widget is better than an Align widget when you're using a stack.

The scaled X and Y values would look something like this:

double scaleX(originalx, originalwidth, currentwidth){
  return(originalx * currentwidth / originalwidth);
}

double scaleY(originaly, originalheight, currentheight){
  return(originaly * currentheight / originalheight);
}

You can then use those scaled values just like the original x and y values on the now-scaled map.

In order to make it more clear, I created a dartpad here so you can play around with it: http://dartpad.dev/34ec25e551a58127b8635fc56744ff29

The green container is meant to simulate your map, and the yellow dot your desired point. You can change the scalingFactorHeight and scalingFactorWidth in the code in order to simulate different screen sizes. You'll see that the yellow dot stays at the center, even though the x and y values are constant.