Real height in flutter?

Question

I am trying to retrieve the real height in Flutter. I tried different options:

MediaQuery.of(context).size.height * MediaQuery.of(context).devicePixelRatio

or

WidgetsBinding.instance.window.physicalSize.height

I add these 2 lines in a new Flutter app (from scratch, just the new counter app screen that flutter creates)

I also tried to use a global key, and it does not work (meaning by that that I get the same result). I am testing it in a Samsung a10, which, according to wikipedia, has a 720 x 1520 pixels. The width I have no problem in calculating it, but the height, is always giving me 1424.0. Why I am not getting the full height? Is happening me with more phone models.

score 0 · Answer 1 · answered Apr 20 '21 at 13:10

0

Please see the documentation for the physicalSize property:

This value does not take into account any on-screen keyboards or other system UI. The padding and viewInsets properties provide information about how much of each side of the view may be obscured by system UI.

answered Apr 20 '21 at 13:10

Riwen

4,734
2
19
31

`MediaQuery.of(context).padding * MediaQuery.of(context).devicePixelRatio` (on Samsung a10, to go on with the example) is 54, and `MediaQuery.of(context).viewInsets` is zero, so still I have some pixels that I don't know where they are... – kike Apr 20 '21 at 13:18

score 0 · Answer 2 · answered Apr 20 '21 at 13:20

try to use this utility class it gives me the right result

class ScreenUtil {
  static ScreenUtil instance = new ScreenUtil();

  int width;
  int height;
  bool allowFontScaling;

  static MediaQueryData _mediaQueryData;
  static double _screenWidth;
  static double _screenHeight;
  static double _screenHeightNoPadding;
  static double _pixelRatio;
  static double _statusBarHeight;
  static double _bottomBarHeight;
  static double _textScaleFactor;
  static Orientation _orientation;

  ScreenUtil({
    this.width = 1080,
    this.height = 1920,
    this.allowFontScaling = false,
  });

  static ScreenUtil getInstance() {
    return instance;
  }

  void init(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    _mediaQueryData = mediaQuery;
    _pixelRatio = mediaQuery.devicePixelRatio;
    _screenWidth = mediaQuery.size.width;
    _screenHeight = mediaQuery.size.height;
    _statusBarHeight = mediaQuery.padding.top;
    _bottomBarHeight = mediaQuery.padding.bottom;
    _textScaleFactor = mediaQuery.textScaleFactor;
    _orientation = mediaQuery.orientation;
    _screenHeightNoPadding =
        mediaQuery.size.height - _statusBarHeight - _bottomBarHeight;
  }

  static MediaQueryData get mediaQueryData => _mediaQueryData;

  static double get textScaleFactory => _textScaleFactor;

  static double get pixelRatio => _pixelRatio;

  static Orientation get orientation => _orientation;

  static double get screenWidth => _screenWidth;

  static double get screenHeight => _screenHeight;

  static double get screenWidthPx => _screenWidth * _pixelRatio;

  static double get screenHeightPx => _screenHeight * _pixelRatio;

  static double get screenHeightNoPadding => _screenHeightNoPadding;

  static double get statusBarHeight => _statusBarHeight * _pixelRatio;

  static double get bottomBarHeight => _bottomBarHeight * _pixelRatio;

  get scaleWidth => _screenWidth / instance.width;

  get scaleHeight => _screenHeight / instance.height;

  setWidth(int width) => width * scaleWidth;

  setHeight(int height) => height * scaleHeight;

  setSp(int fontSize) => allowFontScaling
      ? setWidth(fontSize)
      : setWidth(fontSize) / _textScaleFactor;



}

in your build method first call

ScreenUtil().init(context);

then you can call ScreenUtil.screenHeight

Real height in flutter?

2 Answers2