Place marker based on coordinate for different screen size (Flutter)

Question

So i have this marker widget that can be use to place at images. It will use offset to set the coordinate for x and y

Offset position = Offset(0.0, 0.0);

After that if i want to place the widget it will be something like this

double baseWidth = window.physicalSize.width;
double baseHeight = window.physicalSize.height;

double newWidth = MediaQuery.of(context).size.width;
double newHeight = MediaQuery.of(context).size.height;

double newX = (newWidth*630)/baseWidth;
double newY = (newHeight*380)/baseHeight;

MarkerBox(
   Offset(newX, newY,
   'Box One',
   Colors.blueAccent,
   Image.asset("assets/marker_red.png",
      height: 40, width: 40, fit: BoxFit.cover),
   width / 4.5
),

However, if different screen size, the marker will be place differently. How do i make it static at one place regardless of what screen size? Is it because the coordinate is affected based on different screen size?

Solution

You can get the width and height of the screen with:

• double new_width = MediaQuery.of(context).size.width;
• double new_height = MediaQuery.of(context).size.height;

And after that, you can make a Rule of Tree. Given a "base position" called (base_x, base_y) for a "base resolution" called (base_width, base_height), you can obtain the new (new_x, new_y) for a "new resolution" given by the code above.

• new_x = (new_width*base_x)/base_width
• new_y = (new_height*base_y)/base_height