Skip to content

Edoardo Vignati

– Always looking for something awesome –

Menu
  • About me
  • Studies
  • Publications
  • Skills
  • Portfolio
  • Projects
  • Career
  • Blog
Menu

Constant size of a widget across multiple devices and screen resolutions in Flutter

Posted on 03/03/202330/07/2023 by Edoardo

I was developing a feature in my app, in particular a map with some icon markers using this package. During my programming session I used an Icon widget and I set the icon size at 100. Good, everything run smoothly, but when I launched the app on different screens I found the following situation here below.

Galaxy A52
Galaxy A21
iPhone 8

All the sizes were different! This depends on multiple factors such as the number of pixels and the Device Pixel Ratio. In fact, you have to consider that Flutter works on the concept of “logical pixel” that is independent across multiple devices.

To achieve my goal I had to find a way to have a constant size in all of the smartphones. I explain here the hack I used to solve this problem.

First of all I had to know how many logical pixels each device had. To do this I used the following instructions:

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

Then I had to know the DPR:

double ratio = MediaQuery.of(context).devicePixelRatio;

Everything I was looking for was retrieved. The next step was to multiply the dpr with the total numbers of logical pixel on the screens. Here a table of the approximated values:

Galaxy A52Galaxy A21iPhone 8
Logical px (width * height)310.000350.000250.000
DPR2,811,752,0
Logical px * DPR = total number of physical px871.000612.500500.000

The next step was to find an adequate size for the icon in logical pixels for the smaller phone (the iPhone) and the bigger one (the Samsung Galaxy A21).

In my case I decided to use size = 100 for the Galaxy A52 and size = 40 for the iPhone8 to try to normalize the different icons sizes.

Once given the maximum and the minimum values there was just a thing to do: calculate the equation of the line from two points. Let’s see here the complete formula with the values decided previously:

double x1 = 871000;
double y1 = 100;
double x2 = 500000;
double y2 = 40;
double x = (width * height) * ratio;
double iconSize = (((x - x1) / (x2 - x1)) * (y2 - y1)) + y1;

Then I assigned iconSize to the size of the Icon in this way:

Icon(
  Icons.agriculture,
  color: Colors.green,
  size: iconSize,
)

and this was the result:

Galaxy A52
Galaxy A21
iPhone 8

Mission complete! 👍


Buy Me A Coffee


This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Edoardo on [SOLVED] XMLHttpRequest error in Flutter web is a CORS error06/01/2023
  2. Fabi on [SOLVED] XMLHttpRequest error in Flutter web is a CORS error20/12/2022
  3. Edoardo on How to install hplip on Ubuntu28/11/2022
  4. Alex K on How to install hplip on Ubuntu28/11/2022

© 2023 Edoardo Vignati | Powered by Minimalist Blog WordPress Theme
Manage Cookie Consent
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Manage options Manage services Manage vendors Read more about these purposes
View preferences
{title} {title} {title}