How to convert Android's DP to Flutter's LP? What is the difference between DP and LP?

Question

I got the designs for a new app. All the dimensions are Android-ready and are given in DP - (Density-independent Pixels). How can I convert these values to Flutter's LP (Logical Pixels). I know that Window.devicePixelRatio gives me the number of device pixels for each logical pixel.

What's the exact difference between DP and LP? Are there any built-in methods for dp to lp conversion?

Dilatant

Answer 1

According to the documentation (FlutterView.devicePixelRatio and Flutter for Android Developers), there is no real difference between DP and LP.

Device pixels are also referred to as physical pixels. Logical pixels are also referred to as device-independent or resolution-independent pixels.

Flutter doesn’t have dps but there are logical pixels, which are basically the same as device-independent pixels. The so-called devicePixelRatio expresses the ratio of physical pixels in a single logical pixel.

Employee

Answer 2

According to https://api.flutter.dev/flutter/dart-ui/FlutterView/devicePixelRatio.html there are roughly 38 logical pixels per centimeter, or about 96 logical pixels per inch, of the physical display.

And according to https://developer.android.com/training/multiscreen/screendensities，One dp is a virtual pixel unit that's roughly equal to one pixel on a medium-density screen (160dpi; the "baseline" density).

So we can say：

160 dp == 1 inch == 96 lp

Margarite

Answer 3

You can use the code below to make your mobile screen responsive :

double getHeight(double screenHeightofthedeviceYouAreDebuging,BuildContextcontext,double size)
{

     return (MediaQuery.of(context).size.height / screenHeight) * size;

} 

SO if you are debugging with 5 in screen the height of the screen will be 640 or MediaQuery.of(context).size. ( width and height ) will give you the screen size of the testing device screen Height of the device You Are Debuging = 640 context = BuildContext size = size you want to be as you image , container etc height . So it will convert the size of the screen according to the device used

double getWidth(double screenWidthofthedeviceYouAreDebuging,BuildContext context,double size){

  return (MediaQuery.of(context).size.width / screenHeight) * size;

}

EdgeInsets padding(top,bottom,left,right,context){
    return EdgeInsets.only(
      top: getHeight(640, context, top),
      bottom: getHeight(640, context, bottom),
      left: getHeight(640, context, left),
      right: getHeight(640, context, right));
}

Portend