Want to make your Flutter app **responsive across all screen sizes**? In this tutorial, you'll learn how to use **MediaQuery in Flutter** to access screen dimensions and build layouts that **adapt dynamically to different devices**, whether it's mobile, tablet, or web.

`MediaQuery` is a core Flutter tool that gives you access to **screen size, orientation, pixel density, and more**, helping you design adaptive interfaces with ease.

**What is MediaQuery in Flutter?**
`MediaQuery` allows you to query information about the device’s screen and user interface. It gives you access to properties like:

* `MediaQuery.of(context).size` – Screen size (width & height)
* `MediaQuery.of(context).orientation` – Portrait or landscape
* `MediaQuery.of(context).devicePixelRatio` – Pixel density
* `MediaQuery.of(context).padding` – Safe area insets (e.g., notch, status bar)

**Basic Example:**

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

class ResponsiveExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final width = size.width;
final height = size.height;

return Scaffold(
appBar: AppBar(title: Text("MediaQuery Demo")),
body: Center(
child: Text(
'Screen width: $width\nScreen height: $height',
textAlign: TextAlign.center,
),
),
);
}
}
```

**Responsive Layout Example:**

```dart
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;

if (screenWidt 600) {
return SmallLayout();
} else {
return LargeLayout();
}
}
```

**MediaQuery Properties You Should Know:**

* `MediaQuery.of(context).padding` – handles safe areas
* `MediaQuery.of(context).viewInsets` – useful for keyboard overlay
* `MediaQuery.of(context).textScaleFactor` – respects system font scaling
* `MediaQuery.of(context).platformBrightness` – light/dark mode detection

**Why Use MediaQuery?**

* Create **adaptive layouts** based on screen size
* Handle **orientation changes** (portrait/landscape)
* Respect **safe areas and notches**
* Improve accessibility with **text scaling**

**Combine With:**

* `LayoutBuilder` for widget-level layout constraints
* `Flexible`, `Expanded`, and `Wrap` for dynamic spacing
* `flutter_screenutil` or `responsive_builder` for scalable dimensions

**Perfect For:**

* Making apps look great on phones, tablets, and web
* Responsive dashboards, grids, and forms
* Accessibility-aware UI design

Found this helpful? Drop a like, subscribe for more Flutter tutorials, and leave a comment with your questions!

\#Flutter #MediaQuery #FlutterResponsiveUI #FlutterLayout #FlutterDesign #MobileDevelopment #FlutterTutorial #FlutterTips #AdaptiveUI #FlutterWidgets #FlutterDev #CrossPlatform #FlutterBeginners #ResponsiveFlutter