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).

Practice

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

easy

A. The list of installed fonts

B. The current theme colors

C. The width and height of the device screen

D. The app's current state

Solution

1. Step 1: Understand MediaQuery size property

   MediaQuery.of(context).size returns the screen's width and height as a Size object.

2. Step 2: Differentiate from other properties

   Theme colors, fonts, and app state are unrelated to MediaQuery size.

3. Final Answer:

   The width and height of the device screen -> Option C

4. Quick Check:

   MediaQuery size = screen dimensions [OK]

Hint: MediaQuery size always means screen width and height [OK]

Common Mistakes:

• Confusing size with theme or app state
• Thinking it returns orientation
• Assuming it gives device model info

2. Which of the following is the correct syntax to get the device orientation using MediaQuery?

easy

A. MediaQuery.orientation(context)

B. MediaQuery.of(context).orientation

C. MediaQuery.getOrientation(context)

D. MediaQuery.context.orientation

Solution

1. Step 1: Recall correct MediaQuery syntax

   The correct way is MediaQuery.of(context).orientation to access orientation.

2. Step 2: Eliminate incorrect options

   Other options use invalid method names or wrong property access.

3. Final Answer:

   MediaQuery.of(context).orientation -> Option B

4. Quick Check:

   Use .of(context) to access MediaQuery properties [OK]

Hint: Always use MediaQuery.of(context) to access properties [OK]

Common Mistakes:

• Omitting .of(context)
• Using wrong method names
• Accessing properties directly on MediaQuery

3. Given this Flutter code snippet:

final size = MediaQuery.of(context).size;
final width = size.width;
final height = size.height;

print('Width: $width, Height: $height');

What will this print if the device screen is 360 pixels wide and 640 pixels tall?

medium

A. Width: 360, Height: 640

B. Width: 0, Height: 0

C. Width: 640, Height: 360

D. Width: null, Height: null

Solution

1. Step 1: Understand MediaQuery size values

   MediaQuery.of(context).size.width gives screen width (360), height gives screen height (640).

2. Step 2: Match printed output

   The print statement outputs width first then height, so it prints "Width: 360, Height: 640".

3. Final Answer:

   Width: 360, Height: 640 -> Option A

4. Quick Check:

   Width = 360, Height = 640 [OK]

Hint: Width is first, height is second in MediaQuery size [OK]

Common Mistakes:

• Swapping width and height values
• Assuming zero or null values
• Confusing print output format

4. This Flutter code tries to get screen width but causes an error:

double width = MediaQuery.size.width;

What is the main problem?

medium

A. MediaQuery.size.width should be MediaQuery.width.size

B. Width should be an int, not double

C. MediaQuery.size needs a BuildContext parameter

D. MediaQuery.size is not a valid property; .of(context) is missing

Solution

1. Step 1: Check MediaQuery usage

   MediaQuery properties require calling .of(context) to access size.

2. Step 2: Identify missing .of(context)

   The code misses .of(context), so MediaQuery.size is invalid.

3. Final Answer:

   MediaQuery.size is not a valid property; .of(context) is missing -> Option D

4. Quick Check:

   Always use MediaQuery.of(context) [OK]

Hint: Always call MediaQuery.of(context) before properties [OK]

Common Mistakes:

• Forgetting .of(context)
• Confusing property order
• Wrong data type assumptions

5. You want to build a widget that shows a different layout depending on device orientation. Which Flutter code snippet correctly uses MediaQuery to check orientation?

hard

A. if (MediaQuery.of(context).orientation == Orientation.portrait) { return PortraitWidget(); } else { return LandscapeWidget(); }

B. if (MediaQuery.orientation(context) == 'portrait') { return PortraitWidget(); } else { return LandscapeWidget(); }

C. if (MediaQuery.of(context).size.width > MediaQuery.of(context).size.height) { return PortraitWidget(); } else { return LandscapeWidget(); }

D. if (MediaQuery.of(context).orientation == 'landscape') { return PortraitWidget(); } else { return LandscapeWidget(); }

Solution

1. Step 1: Use correct orientation check

   MediaQuery.of(context).orientation returns an enum Orientation.portrait or Orientation.landscape.

2. Step 2: Verify correct comparison and widget return

   if (MediaQuery.of(context).orientation == Orientation.portrait) { return PortraitWidget(); } else { return LandscapeWidget(); } compares orientation to Orientation.portrait correctly and returns widgets accordingly.

3. Step 3: Eliminate wrong options

   if (MediaQuery.orientation(context) == 'portrait') { return PortraitWidget(); } else { return LandscapeWidget(); } uses wrong syntax, C compares sizes incorrectly, D reverses widget logic.

4. Final Answer:

   if (MediaQuery.of(context).orientation == Orientation.portrait) { return PortraitWidget(); } else { return LandscapeWidget(); } -> Option A

5. Quick Check:

   Compare orientation enum, not strings or sizes [OK]

Hint: Compare orientation to Orientation.portrait or .landscape [OK]

Common Mistakes:

• Comparing orientation to strings
• Using size to guess orientation
• Reversing widget logic