Open In App

Flutter - Managing the MediaQuery Object

Last Updated : 23 Aug, 2025
Comments
Improve
Suggest changes
16 Likes
Like
Report

During the development of apps for both phones and tablets, it is a common practice to design different UI layouts for various screen sizes in order to provide a better user experience. In addition to screen dimensions, users may also have personal preferences, such as larger font sizes for readability or reduced animations for accessibility. This is where MediaQuery comes into play.

MediaQuery allows you to access information about the current device’s screen size, orientation, and user preferences, enabling you to adapt your layout dynamically. It provides a higher-level view of the app’s display environment while also offering detailed insights into the device’s configuration and layout preferences.

In practice, MediaQuery is always available in Flutter and can be accessed using:

MediaQuery.of(context)

From there you can retrieve useful details such as:

  • Screen size: Adjust widget dimensions relative to the device.
  • Orientation: Switch layouts for portrait or landscape.
  • Text scale factor: Detect if the user has changed the default font size.
  • View insets and padding: Identify whether parts of the screen are obscured by system UI elements (like notches, status bars, or the keyboard), similar to what the SafeArea widget provides.

Example 1: Using mediaQuery.of automatically causes the widgets to rebuild themselves according to the current device sizes and layout preferences every time they change.

main.dart 
import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  var size, height, width;

  @override
  Widget build(BuildContext context) {
    // getting the size of the window
    size = MediaQuery.of(context).size;
    height = size.height;
    width = size.width;

    return Scaffold(
      appBar: AppBar(
        title: Text("Geeks For Geeks"),
        backgroundColor: Colors.green,
      ),
      body: Container(
        color: Colors.yellow,
        height: height / 2, //half of the height size
        width: width / 2, //half of the width size
      ),
    );
  }
}

Output

MediaQuery_example_1
Flutter - Managing the MediaQuery Object

Example 2: Getting device orientation and rebuilding accordingly.

main.dart 
import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
var orientation, size,height,width;
  
  
  @override
  Widget build(BuildContext context) {
    
    // getting the orientation of the app
    orientation = MediaQuery.of(context).orientation;
    
    //size of the window
    size = MediaQuery.of(context).size; 
    height = size.height;
    width = size.width;

    return Scaffold(
      appBar: AppBar(
        title: Text("Geeks For Geeks"),
        backgroundColor: Colors.green,
      ),

      // checking the orientation
      body: orientation == Orientation.portrait?Container(
        color: Colors.blue,
        height: height/4,
        width: width/4,
      ):Container(
        height: height/3,
        width: width/3,
        color: Colors.red,
      ),
    );
  }
}

Output

MediaQuery_example2
Flutter - Managing the MediaQuery Object

Best Practices

  • Use MediaQuery for global screen info (e.g., orientation, device dimensions).
  • Use LayoutBuilder when adapting to parent constraints.
  • Wrap UI in SafeArea to handle notches and system overlays.
  • Centralize MediaQuery logic in a helper class or provider for cleaner code.

N

niranjannaik
Improve
Article Tags :

Explore

Lightbox