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 ?

[shibakar]

[tamremariam]

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);