Flutter Question posted in
The official Flutter documentation can be found here.

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.

Tags:

2

Answers


  1. 0 
    double pxValue = 100; // Your web pixel value
double logicalWidth = pxValue / MediaQuery.of(context).devicePixelRatio;

SizedBox(width: logicalWidth);

    MediaQuery.of(context).devicePixelRatio provides the ratio between logical and physical pixels on the device.
    Dividing the pxValue by this ratio gives a rough estimate of the logical width in Flutter.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search