Why MediaQuery for responsiveness in Flutter? - Purpose & Use Cases

The Big Idea

What if your app could magically fit every screen perfectly without extra work?

The Scenario

Imagine you build a mobile app that looks great on your phone. But when you open it on a tablet or a bigger screen, everything looks too small or too big, and buttons are misplaced.

You try to guess screen sizes and set fixed widths and heights for each device manually.

The Problem

This manual approach is slow and frustrating because there are so many device sizes and orientations.

You end up writing lots of code for each screen size, which is hard to maintain and easy to break.

The Solution

MediaQuery in Flutter helps you get the current screen size and orientation automatically.

It lets your app adjust layouts and sizes dynamically, so your UI looks good on any device without guessing.

Before vs After

✗ Before

Container(width: 300, height: 600) // fixed size, may not fit all screens

✓ After

Container(width: MediaQuery.of(context).size.width * 0.8, height: MediaQuery.of(context).size.height * 0.5) // responsive size

What It Enables

With MediaQuery, your app can adapt smoothly to all screen sizes and orientations, giving users a great experience everywhere.

Real Life Example

Think of a photo gallery app that shows a grid of images. Using MediaQuery, the app can show more columns on a tablet and fewer on a phone, making the best use of space.

Key Takeaways

Manual fixed sizes don't work well for many devices.

MediaQuery provides real-time screen info to build flexible layouts.

This leads to apps that look good and work well on any screen.