MediaQuery for responsiveness in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How does MediaQuery help in Flutter layouts?

What does MediaQuery.of(context).size return in a Flutter app?

A The size of the device screen in logical pixels

B The size of the widget tree currently built

C The size of the app bar only

D The size of the keyboard on screen

💡 Hint

Think about what information you need to make your UI adapt to different devices.

MediaQuery.of(context).size returns the width and height of the device screen in logical pixels, which helps you build responsive layouts.

❓ ui_behavior

intermediate

Using MediaQuery to set widget width

Given this Flutter code snippet, what will be the width of the Container on a device with screen width 400 logical pixels?

Container(
  width: MediaQuery.of(context).size.width * 0.5,
  height: 100,
  color: Colors.blue,
)

A 200 logical pixels

B 100 logical pixels

C 400 logical pixels

D 50 logical pixels

💡 Hint

Multiply the screen width by 0.5 to find the container width.

The container width is half the screen width, so 400 * 0.5 = 200 logical pixels.

❓ lifecycle

advanced

When does MediaQuery update its values?

In Flutter, when does MediaQuery.of(context) update its values during app usage?

A Every time a widget rebuilds regardless of screen changes

B When the device orientation or screen size changes

C Only once when the app starts

D Only when the app is restarted

💡 Hint

Think about what events affect screen size or layout.

MediaQuery updates when the device orientation or screen size changes, allowing responsive layouts to adapt dynamically.

🔧 Debug

advanced

Why does MediaQuery.of(context) throw an error?

Consider this Flutter widget tree snippet:

Widget build(BuildContext context) {
  return Container(
    width: MediaQuery.of(context).size.width,
    height: 100,
  );
}

Why might MediaQuery.of(context) throw an error here?

A Because MediaQuery only works inside StatefulWidgets

B Because Container cannot have width set from MediaQuery

C Because MediaQuery requires async context

D Because there is no MediaQuery ancestor in the widget tree at this context

💡 Hint

Think about what widgets provide MediaQuery data.

MediaQuery.of(context) requires a MediaQuery widget above in the widget tree, usually provided by MaterialApp or WidgetsApp. Without it, it throws an error.

🧠 Conceptual

expert

How to handle different screen sizes with MediaQuery?

You want your Flutter app to show a different layout on phones and tablets. Which approach using MediaQuery is best?

A Use <code>MediaQuery.of(context).orientation</code> only to decide layout

B Hardcode pixel values for each device type without MediaQuery

C Check <code>MediaQuery.of(context).size.shortestSide</code> and use a threshold to decide layout

D Use <code>MediaQuery.of(context).padding</code> to decide layout

💡 Hint

Think about a property that helps distinguish phone vs tablet screen size.

Using shortestSide helps detect if the device is a tablet or phone by checking if the smaller screen dimension passes a threshold (e.g., 600 logical pixels).