Media Query Flutter Widget Example

In this article, we are going to understand how media query flutter widget is used in flutter applications for different purposes like to get device size, device orientation, screen brightness etc.

Media Query widget is basically used to get device information in mobile applications. To make responsive design of mobile application for all types of devices, media query widget is perfect solution. Using media query widget, we can change layout according to device configuration.

If we want to display widget over only half width of screen, we can implement it with media query widget using size property. We can also set dynamic height same as width using size property of media query widget.

In this flutter tutorial, we can understand how media query widget is useful to make responsive design of flutter application with the help of different properties.


Media Query Flutter Device Size

We can get size of device in pixels using MediaQuery.of(context).size. We can also achieve device width using MediaQuery.of(context).size.width and device height using MediaQuery.of(context).size.height.


Device Pixel Ratio

If we want to device size in number of device pixels for each pixel, we can get through MediaQuery.of(context).devicePixelRatio.


Media Query Flutter Device Orientation

If we want to show different layouts for different orientations, first we need to get current orientation of device. We can get it using MediaQuery.of(context).orientation.


Device Brightness

We can get brightness level of device using MediaQuery.of(context).platformBrightness.


Invert Color

We can get information about if screen colors are inverted by user or not using MediaQuery.of(context).invertColors which returns true or false value.


Media Query Flutter Device Font Scale

If we want to set application fonts size same as device fonts size, first we need to get font scale of deice. We can get it using MediaQuery.of(context).textScaleFactor.


Device Bold Font

To check device is requested bold font or not, use MediaQuery.of(context).boldText which returns true or false value.


Device Padding

If we want to set padding for status bar or notch which obscured some part of device display, use MediaQuery.of(context).padding.


Device Insets

If we want to set padding for keyboard which completely obscured device display, use MediaQuery.of(context).viewInsets.


Device Animation

To check device animations are disabled by user or not, use MediaQuery.of(context).disableAnimations which returns true or false value.


Media Query Flutter Device Hour Format

To check device uses 12 or 24 hour format, use MediaQuery.of(context).alwaysUse24HourFormat which returns true or false value.


Leave a Reply