Flutter screen size calculation

Question

I am getting sick trying to adapt my app to a certain tablet dimensions using flutter.

The tablet is a Samsung Galaxy Tab S5e with screen of 2560x1600.

When I make flutter return the screen dimensions using:

print("Size W is ${MediaQuery.of(context).size.width}");
print("Size H is ${MediaQuery.of(context).size.height}");

What I get is:

Size W is 1137.7777777777778
Size H is 711.1111111111111

Then, from this answer I learned to use:

var pixRatio = MediaQuery.of(context).devicePixelRatio;

So now I can actually get the right value using:

print("Corrected size W is ${MediaQuery.of(context).size.width * pixRatio}");
print("Corrected size H is ${MediaQuery.of(context).size.height * pixRatio}");

And get:

Corrected size W is 2560.0
Corrected size H is 1600.0

The problem is that, every time I want to put a widget with dimension, Container, Image, specify a text size etc on the screen, I have to use the trick like

Container(
    width: 100 / pixRatio,
    height: 200 / pixRatio,
),

If i do not include the /pixRatio correction, it just draws incorrectly and I get lots of pixel overflows..

Is that the only way to put widgets on the screen with the correct size??, I mean, do I really NEED to add every single time the /pixRatio correction on width and height??

Sounds not very practical for me.

Answer 1

The default unit of measure in Flutter is the DIP (density-independent pixel). Different devices have different screen sizes and resolutions, which lead to different pixel ratios. The DIP is meant to allow you to design widgets that are roughly the same size visually, regardless of device.

By dividing all sizes by the pixel ratio, you are converting DIPs to regular pixels. If your widget sizes are defined in regular pixels, you will find that your layout will vary a LOT depending on screen resolution, which is likely not what you want.

Your Container is now configured to be 100 pixels wide and 200 pixels tall, on a tablet with a resolution of 2560x1600. You can fully fit 25 such Containers on a single Row. If you now switch to a tablet with a screen resolution of 1280x800 but the same screen size, your Container will visually be twice as wide and twice as tall, therefore occupying an area that's visually 4 times larger! And only 12 of them will fully fit on a single Row. Is that the behavior you want to achieve?

I strongly recommend that you reconsider the layout that you want to achieve and then find out how to achieve it using the default unit of measure rather than pixels.

If on the other hand you think you have a valid reason for using pixels instead, please mention it in the question so that it can be addressed.

Answer 2

You can take a look at this package. It allows you to create pixel perfect UI no mater on which device you run your app. https://pub.dev/packages/flutter_screenutil