Media Query

Introduction of Media Query

Media Query in Flutter is a powerful widget that provides information about the size, orientation, and pixel density of the device’s screen, as well as user accessibility settings and platform brightness. It allows you to build responsive layouts that adapt to different screen sizes and orientations.

MediaQueryData Properties:

size: The size of the media in logical pixels (width and height).
MediaQuery.of(context).size;

devicePixelRatio: The number of device pixels for each logical pixel.
MediaQuery.of(context).devicePixelRatio;

textScaleFactor: The current text scaling factor.
MediaQuery.of(context).textScaleFactor;

platformBrightness: The current brightness mode (light or dark) of the platform.
MediaQuery.of(context).platformBrightness;

padding: The padding around the edges of the screen.
MediaQuery.of(context).padding;

viewInsets: The parts of the display that are completely obscured by system UI (such as the on-screen keyboard).
MediaQuery.of(context).viewInsets;

orientation: The orientation of the screen (portrait or landscape).
MediaQuery.of(context).orientation;

alwaysUse24HourFormat: Whether the user prefers to use a 24-hour format.
MediaQuery.of(context).alwaysUse24HourFormat;

accessibleNavigation: Whether the user requested accessible navigation.
MediaQuery.of(context).accessibleNavigation;

invertColors: Whether the device is currently requesting inverted colors.
MediaQuery.of(context).invertColors;

disableAnimations: Whether the user requested animations to be disabled.
MediaQuery.of(context).disableAnimations;

boldText: Whether the user prefers bold text.
MediaQuery.of(context).boldText;

Usage Example:

Widget build(BuildContext context) {
  final mediaQueryData = MediaQuery.of(context);

  return Scaffold(
    appBar: AppBar(
      title: Text('MediaQuery Example'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Screen width: ${mediaQueryData.size.width}'),
          Text('Screen height: ${mediaQueryData.size.height}'),
          Text('Device pixel ratio: ${mediaQueryData.devicePixelRatio}'),
          Text('Text scale factor: ${mediaQueryData.textScaleFactor}'),
          Text('Platform brightness: ${mediaQueryData.platformBrightness}'),
          Text('Orientation: ${mediaQueryData.orientation}'),
        ],
      ),
    ),
  );
}

Final Code: This is the final code with some of the above Media Query properties.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple[200],
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Height: ${MediaQuery.of(context).size.height.toStringAsFixed(0)}',
              style: TextStyle(fontSize: 30),
            ),
            SizedBox(
              height: 15,
            ),
            Text(
              'Width: ${MediaQuery.of(context).size.width.toStringAsFixed(0)}',
              style: TextStyle(fontSize: 30),
            ),
            SizedBox(
              height: 15,
            ),
            Text(
              'Aspect Ratio: ${MediaQuery.of(context).size.aspectRatio.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 30),
            ),
            SizedBox(
              height: 15,
            ),
            Text(
              ' ${MediaQuery.of(context).orientation.toString()}',
              style: TextStyle(fontSize: 30),
            ),
          ],
        ),
      ),
    );
  }
}

In this example, various properties of Media Query are used to display information about the device’s screen size, pixel ratio, text scale factor, brightness, and orientation. This information can help you create responsive layouts that adapt to different devices and user settings.

Thank for visiting Hybrid App Development
Posted by Hussam HM