CODEWITHSUNDEEP
imagefluttersizeelement
rahul Kushwaha
rahul Kushwaha

Reputation: 2819

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

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?

Upvotes: 2

Views: 605

Answers (1)

harpreet seera
harpreet seera

Reputation: 1828

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.

Upvotes: 2

Related Questions