How to Determine Screen Height and Width

Question

I've created a new application on flutter, and I've had problems with the screen sizes when switching between different devices.

I created the application using the Pixel 2XL screen size, and because I've had containers with a child of ListView it's asked me to include a height and width for the container.

So when I switch the device to a new device the container is too long and throws an error.

How can I go about making it so the application is optimized for all screens?

Answer 1

You can use:

• double width = MediaQuery.of(context).size.width;
• double height = MediaQuery.of(context).size.height;

To get height just of SafeArea (for iOS 11 and above):

• var padding = MediaQuery.of(context).padding;
• double newheight = height - padding.top - padding.bottom;

Answer 2

Getting width is easy but height can be tricky, following are the ways to deal with height

// Full screen width and height double width = MediaQuery.of(context).size.width; double height = MediaQuery.of(context).size.height;  // Height (without SafeArea) var padding = MediaQuery.of(context).viewPadding; double height1 = height - padding.top - padding.bottom;  // Height (without status bar) double height2 = height - padding.top;  // Height (without status and toolbar) double height3 = height - padding.top - kToolbarHeight;