Flutter - Using MediaQuery Examples

This tutorial gives you some examples how to use MediaQuery in Flutter.

To provide the best user interface, some applications need to change the layout depending on device configuration. In Flutter, we can use MediaQuery to get the current device information.

Using MediaQuery is very simple. We can use it inside Widget build(BuildContext context), as it requires BuildContext as argument.

  @override
  Widget build(BuildContext context) {
    MediaQueryData deviceInfo = MediaQuery.of(context);

    print('size: ${deviceInfo.size}');
    print('padding: ${deviceInfo.padding}');

    return Scaffold(
        appBar: AppBar(
          title: Text('Media Query Examples'),
        ),
        body: Center(
            child: Text("by Woolha.com")
        )
    );
  }

If the device configuration suddenly changes, for example the application window is resized or the orientation changes, build will be called and MediaQuery.of(context) will return a new value.

Below are some cases what you can obtain using MediaQuery. Beforehand, let's assume that we have store MediaQueryData deviceInfo = MediaQuery.of(context);

Get Screen Pixels Size

To get the size of the media in logical pixels, use deviceInfo.size (Size). A logical pixel may contain multiple pixels. To get it, use deviceInfo.devicePixelRatio, which returns the number of device pixels for each logical pixel.

Get Screen orientation

Device orientation is one of the most used MediaQuery properties. Use deviceInfo.orientation to get the current orientation. This allows you to show different layout for different orientation.

Get Padding and Insets

With deviceInfo.padding, you can get parts of the display that are partially obscured by system UI such as status bar or notch. Using deviceInfo.viewInsets, you can get parts of the display that are completely obscured by system UI, typically the keyboard.

Get Font Scale and Style

You may want to apply the system's font settings on your application. Use deviceInfo.textScaleFactor (double) to get the font scale. It returns the number of font pixels for each logical pixel. Use deviceInfo.boldText (bool) in order to know if the platform requests bold font.

Get Animation Status

Some users prefer to turn off animation to improve performance. We can also use it as consideration whether to use animation on the application. We can know it using deviceInfo.disableAnimations (bool).

Get Invert Color

If the user invert the screen colors, we can use that information to adjust how colors should be displayed. Use deviceInfo.invertColors (bool) to get that information.

Get Screen Brightness 

To get the screen brightness, use deviceInfo.platformBrightness (Brightness).

Get Hour Format

The device may use 12 or 24-hour format. Use deviceInfo.alwaysUse24HourFormat (bool) which returns true if the device uses 24-hour format.

Below is the list of MediaQuery's properties.