Flutter › Responsive & Adaptive UI Design
How does the MediaQuery class let you actually retrieve the current specific screen size and other genuinely useful device information, such as whether the device is currently genuinely in portrait or landscape orientation?
BeginnerAnswer
MediaQuery provides access to a genuinely wide range of useful information about the current device and its own display, including the exact current screen width and height, the device's own current specific orientation, its current genuine text scale factor, and the exact size of any system inset such as a notch or the status bar, and calling MediaQuery.of context.size lets you retrieve the current screen's own exact dimensions, letting you properly make layout decisions based on that particular specific available information.
final screenWidth = MediaQuery.of(context).size.width;
final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;Real-world example A photo gallery app checks the current screen orientation using MediaQuery to properly decide whether to display two or three columns of thumbnail photos within its own grid layout.