Flutter screens sizes-CodePudding

Container(height:50, width:50)

How come I define a container of 50px * 50px (with some text inside), but the container is quite smaller on SAMSUNG SCREEN than on HUAWEI SCREEN. There even is an overflow.

I would understand if this happened while using Media Querry.

Related Question

Can someone explain, please?

CodePudding user response：

Different devices have different resolutions and dpi, which causes your widgets to look smaller/bigger on different devices

in Container(height:50, width:50) 50 is not pixel unit, it is dp

px = dp * (dpi / 160)

For example, with a device with a dpi of 320, with 10 dp we have: 10 * (320/160) = 20 px, 1 dp is equivalent to 2 px.

if you want convert pixel to device size unit, try:

 double convertFromPixel(double pixel){
    var size = MediaQuery.of(context).devicePixelRatio; //3.5
    var value = pixel / size; //3.5dp = 1px
    return value; 
  }

and use:

Container(
    height: convertFromPixel(50), //50 pixel, height will auto size 
    width: convertFromPixel(50),
)