Search code examples
flutter

flutter how to calculate widget size from pixel?

For example, 100px for web:

How to convert it to a width in flutter?

SizedBox(width: 100);

100 here in flutter is logical.

Solution

  • For example with iPhone 12, technical specifications res is 1170 x 2532 pixels

    -> Width = 1170px

    -> Height = 2532px

    Then measure by Dart code run on iPhone 12:

    final logicalWidth = MediaQuery.of(context).size.width; // 390.0
final logicalHeight = MediaQuery.of(context).size.height; // 844.0
final devicePixelRatio = MediaQuery.of(context).devicePixelRatio; // 3.0

    so real px width (1170) = logical width (390.0) x device pixel ratio (3.0)

    -> 100px on iPhone 12 on flutter = 100/3.0 = 33.3