Skip to content

I have figma design with height and width in px the designSize: Size(390, 844) takes in dp will there be any issue because of this ? #597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shibakar opened this issue Jan 15, 2025 · 1 comment

Comments

@shibakar
Copy link

No description provided.

@tamremariam
Copy link

Yes, there can be an issue if you directly use pixel (px) values from your Figma design in a Flutter app, where sizes are in density-independent pixels (dp). Here’s why:
Understanding the Difference:
• px (Pixels): Fixed-size units based on screen resolution.
• dp (Density-independent Pixels): scales based on device screen density (DPI).
• Figma px ≠ Flutter dp: The values in Figma are in px, while Flutter expects dp (logical pixels).
Potential Issues:

  1. Size Discrepancy across Devices:
    If you directly use 390x844 px in Flutter, it might look too small or too large on devices with different screen densities.
    A high-density screen (xxhdpi, xxxhdpi) will make your UI appear smaller.
    A low-density screen (mdpi, hdpi) will make it appear larger.
  2. Scaling Problem on Different Devices:
    The UI won’t be responsive, and elements may not align properly.
    How to Fix It?
    You need to convert px to dp based on the device’s pixel density (devicePixelRatio).

Convert px to dp manually
Formula:
dp=pxdevicePixelRatiodp = \frac{px}{devicePixelRatio}
Example:

double convertPxToDp(double px, BuildContext context) {
  return px / MediaQuery.of(context).devicePixelRatio;
}

Use it:

double widthInDp = convertPxToDp(390, context);
double heightInDp = convertPxToDp(844, context);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants