Flutter Media Query: Different Examples of Using MediaQuery in Flutter

Learn about MediaQuery in Flutter and how to use it to create responsive UIs. This article covers different examples of MediaQuery usage in Flutter, including adapting images, fonts, and layout based on device size.

MediaQuery is a powerful tool in Flutter that allows developers to create responsive user interfaces. In this article, we'll explore different examples of using MediaQuery to adapt images, fonts, and layout based on device size. 

We'll also discuss how to use MediaQuery to determine the device orientation and the platform (iOS or Android).

Code Sample: Here's an example of how to use MediaQuery to change the size of an image based on the device's width:

class MyImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.asset(
      'assets/images/my_image.png',
      width: MediaQuery.of(context).size.width * 0.8,
      fit: BoxFit.cover,
    );
  }
}

In the example above, the image width is set to 80% of the device's width using MediaQuery.of(context).size.width * 0.8.

..

Here's an example of how to use MediaQuery to change the font size based on the device's pixel density:

class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello World',
      style: TextStyle(
        fontSize: 20 * MediaQuery.of(context).devicePixelRatio,
      ),
    );
  }
}

In the example above, the font size is multiplied by the device pixel ratio using MediaQuery.of(context).devicePixelRatio.

..

Here is a list of all the primary media query properties in Flutter:

• size: A Size object representing the dimensions of the current device screen.
• devicePixelRatio: A double representing the number of physical pixels per logical pixel.
• textScaleFactor: A double representing the text scaling factor of the device, which is typically used to adjust font sizes based on the device's accessibility settings.
• platformBrightness: An enum value of Brightness indicating the overall brightness of the platform (i.e. light or dark mode).
• padding: A EdgeInsets object representing the padding on all four sides of the screen.
• viewInsets: A EdgeInsets object representing the area of the screen that is obscured by system overlays (such as the status bar or navigation bar).
• systemGestureInsets: A EdgeInsets object representing the area of the screen that is used for system gestures (such as swiping to go back).
• alwaysUse24HourFormat: A bool indicating whether the device is set to use 24-hour time format.
• accessibleNavigation: A bool indicating whether the device has accessibility features enabled that affect the way navigation works (such as "talkback" on Android).
• invertColors: A bool indicating whether the device has inverted colors enabled for accessibility.
• highContrast: A bool indicating whether the device has high contrast mode enabled for accessibility.

These properties can be accessed using the MediaQuery class in Flutter, as shown in the example code below:

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;
    final double pixelRatio = MediaQuery.of(context).devicePixelRatio;
    final double textScaleFactor = MediaQuery.of(context).textScaleFactor;
    final Brightness platformBrightness = MediaQuery.of(context).platformBrightness;
    final EdgeInsets padding = MediaQuery.of(context).padding;
    final EdgeInsets viewInsets = MediaQuery.of(context).viewInsets;
    final EdgeInsets systemGestureInsets = MediaQuery.of(context).systemGestureInsets;
    final bool alwaysUse24HourFormat = MediaQuery.of(context).alwaysUse24HourFormat;
    final bool accessibleNavigation = MediaQuery.of(context).accessibleNavigation;
    final bool invertColors = MediaQuery.of(context).invertColors;
    final bool highContrast = MediaQuery.of(context).highContrast;

    return Container(
      child: Text('Screen size: $screenSize\n'
          'Device pixel ratio: $pixelRatio\n'
          'Text scale factor: $textScaleFactor\n'
          'Platform brightness: $platformBrightness\n'
          'Padding: $padding\n'
          'View insets: $viewInsets\n'
          'System gesture insets: $systemGestureInsets\n'
          'Always use 24-hour format: $alwaysUse24HourFormat\n'
          'Accessible navigation: $accessibleNavigation\n'
          'Invert colors: $invertColors\n'
          'High contrast: $highContrast\n'),
    );
  }
}

..