Flutter screens sizes

Question

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 query.

Related Question

Can someone explain, please?

Answer 1

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