如何在 flutter 应用程序中管理 android 和 ios 的图像分辨率？

Question

In Native ios and native android, 1x, 2x,3x images and mdpi, xdpi etc images sizes can use. For flutter app, how to manage this?

If i use all those sizes, app size will be huge and also hard to manage. Otherwise if i use 1x size only for different device sizes, it will be shrinked or blurred.

Can anyone suggest me the solution for this?

Updated question: For each and every image, which sizes i can ask my UI/UX designer to provide for ios and android?

Answer 1

If you don't use internet, converting pngs or jpgs to webp because it has less size than others. It may be good solution for you.

Answer 2

Either you have an offline image or loading from the network. You just need to manage it on Screen Size.

You can give custom height and width to the image or parent widget to show accordingly screen resolutions.

Here is the different way to get width and height.

Getting width is easy but height can be tricky , following are the ways to deal with height

// Full screen width and height
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

// Height (without SafeArea)
var padding = MediaQuery.of(context).padding;
double height1 = height - padding.top - padding.bottom;

// Height (without status bar)
double height2 = height - padding.top;

// Height (without status and toolbar)
double height3 = height - padding.top - kToolbarHeight;

You can use width /2 or /3 for the width of the image and the same for height. It will work for Android, iOS, or other platforms too.

Do let me know if you have any questions.