Get width and height of the device in Flutter

Question

I need a reliable way to get the dimensions of the screen.

I know MediaQuery.of(context), but it removes the bottom padding when the bottom UI item is visible.

Chatoyant

medium.com/@diegoveloper/… – Virology

@Virology what? it's about the size of the widget – Chatoyant

What do you mean 'bottom UI item'? – Posterity

MediaQuery.of(context).size.height MediaQuery.of(context).padding.bottom – Virology

@Virology I've tried this one SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); print(MediaQuery.of(context).size.height.toString() + " - " + MediaQuery.of(context).padding.bottom.toString()); padding.bottom always returns with 0 to me – Chatoyant

@Posterity Sorry, I meant the SystemUiOverlay.bottom, i'm not sure how it's called in android – Chatoyant

ah, haven't used that myself. What about MediaQuery.of(context).viewInsets. If you open a keyboard, that's what it shows up as using. – Posterity

@Posterity No success :( both viewInsets and padding returns with EdgeInsets.zero... – Chatoyant

I can solve this like this: MediaQuery.of(context).devicePixelRatio * MediaQuery.of(context).size.width But i really believe there should be a better solution... – Chatoyant

Hmmm. That's starting to sound like a bug, although it might be because the underlying activity that's managing flutter is actually reduced in size when the bottom is shown. And using devicePixelRatio isn't what you want either, as it the number of device pixels per logical pixels, not the aspect ratio of the screen.... – Posterity

ummm. try import 'dart:ui' as ui; and ui.window.physicalSize. Although I think that's what mediaquery is using under the hood – Posterity

@Posterity Yeah, probably you were right. I've just used ui.window.physicalSize, but it returns with the same values. ui.window.padding is the same story – Chatoyant

Answer 1

This appears to be impossible from within dart at the moment on Android due to flutter ignoring the bottom system UI (i.e. the buttons).

I thought this might be a bug, but if you look closely at the documentation it never states that window.physicalSize or MediaQueryData.size are the physical dimensions of the screen, but rather the size to which flutter can render. That probably makes sense, or else every single app would have to make sure to take that into account.

So what you're going to have to do is use method channels to communicate with android directly. I took a look already and there doesn't appear to be any plugins doing this, so you could wrap it up into one if you feel ambitious. But what you'll want to do is make a call to native and then get the physical screen size directly in java code. If you do that you'd probably be best off implementing it for iOS as well, although this same problem doesn't exist there (you could even do it directly in flutter with an if/else).

Luckily, someone has done this before so you can use it as an example: https://github.com/magnatronus/flutter-displaymetrics. Assuming that displayMetrics gives you the right size.

Hope that helps and sorry I don't have a simpler answer for you!

Posterity

Thanks for your help man. Hope there will be a better solution soon though. – Chatoyant

It might be worth raising a bug with the flutter people over on GitHub, but I've a pretty strong feeling they'll say it's enough of a corner case that someone can just write a plugin for it. – Posterity

Answer 2

Recently I've published plugin, that can help you to get the dimensions of the screen, and other display metrics, such as PPI and diagonal, also it will help you to convert inches & cm to Flutter logical pixels. You can try it here https://pub.dev/packages/display_metrics

Bulrush