MediaQuery Widget – Flutter Widget Guide By Flutter Agency

What is MediaQuery Widget?

The MediaQuery Widget is a widget similar to Theme in that you can use the BuildContext to access it anywhere in the app. This is done via a method on the MediaQuery class called off. The method will look up the tree, find the nearest MediaQuery class, and give you a reference to that MediaQuery instance anywhere in your app. A few widgets built into Flutter provide an of the method.

MediaQuery Widget is the first place you should look if you’re trying to get specific information about the physical device your app is running on, or if you want to manipulate the device. You can use it to:

• Ask if the phone is currently in portrait or landscape orientation.
• Disable animations and invert colors for accessibility reasons.
• Ask the phone is the user has their text size factor scaled up.
• Set the padding for your entire app.

The constructor of MediaQuery will look like below :

MediaQuery({
  Key? key,
  required MediaQueryData data,
  required Widget child,
})

Code snippet will look like below :

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Media Query Examples'),
          ),
          body: const Center(child: Text("Media Query"))),
    );
  }
}

In the above code, we have wrapped Text Widget by Center Widget

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

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 a different layout for different orientations.

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 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.

Properties :

accessible navigation: Whether the user is using an accessibility service such as VoiceOver or TalkBack.

alwaysUse24HourFormat: Whether the time setting uses 24-hour format.

boldText: Whether the platform requests bold font.

devicePixelRatio:The number of device pixels for each logical pixel.

disableAnimations:Whether the platform requests to disable animations.

invertColors: Whether the colors are being inverted.

orientation: The display orientation, portrait, or landscape.

padding: Parts of the display that are partially obscured by system UI, such as status bar or notch.

platformBrightness: Brightness level of the display.

size: Size of the media in logical pixels.

Thanks for reading !!!

Do let us know if you need further assistance

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.