How determine the size of the image to use for apps?

Question

I am using the flutter to develop the app, and in the app, I want to use the image.

Since the image can increase the size of the app if not properly sized and it can also destroy the app if the image doesn't look good.

I am not worried about the resolution because I will aim for the highest display dpi and generate for all the lower screen, but the problem is in deciding the image size

I could have a large image or small image with the same dpi. In flutter number is used to size the element in the screen and this number could mean different pixel length for different device and it doesn't give the size of the card in the app, hence could not decide the image size.

How to determine the size of the image to use for the given element in App?

I will know the width and height of the item where I want to use my image in number (not in pixel length or any physical unit) but how do I decide the size of the image which would look good on all the devices?

Solution

For deciding the size , you can size acc to the width and height of screen and this can be achieved using MediaQuery class. For Example :

double width = MediaQuery.of(context).size.width*0.1    //for 10 % width
double height = MediaQuery.of(context).size.height*0.1    //for 10 % width

And If we talk about the resolution than, for resolution add the same image or asset in asset file as well as in 2x folder and 3x folder in the asset folder itself.

Flutter framework picks the correct sized asset according to the resolution.

For your reference see the Official Documentation.

Comments

[rahul Kushwaha]

double width = MediaQuery.of(context).size.width*0.1 this won't give the height in pixel ita again number which means different unit to different screen

[GrahamD]

I think harpreet is giving you the information you need to solve your problem. Mediaquery also provides a pixel ratio for the device...then it is simple math to calculate your required sizes. Also read this post stackoverflow.com/questions/49704497/…. Deciding if it looks good is too subjective for this forum imho.

[Swati]

I have also tried using harpreet's solution and it worked for me. Please accept the answer.