0
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?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
70B1 H4CK3R
  • 322
  • 1
  • 10
  • could you include what you have done with Media Querry? – eamirho3ein Dec 23 '22 at 07:05
  • may you screen overflow is because of other widget, could you include a sample code that regenerate that issue? – eamirho3ein Dec 23 '22 at 07:06
  • 1
    Possible duplicate of https://stackoverflow.com/questions/69881154/how-fix-scaling-for-small-screen-size-in-flutter Different devices have different resolutions and dpi, which causes your widgets to look smaller/bigger on different devices. The answer also refers to that problem (scaling). – Ante Bule Dec 23 '22 at 07:12

1 Answers1

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),
)
Xuuan Thuc
  • 2,340
  • 1
  • 5
  • 22