Flutter MediaQuery Tutorial | Build Responsive UI in Flutter Easily

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