MediaQuery for responsiveness in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is MediaQuery in Flutter?

MediaQuery is a widget that provides information about the size and orientation of the screen or parent widget. It helps make apps responsive by adapting UI to different screen sizes.

beginner

How do you get the screen width using MediaQuery?

You use MediaQuery.of(context).size.width to get the current screen width in logical pixels.

beginner

Why is responsiveness important in mobile apps?

Responsiveness ensures the app looks good and works well on different devices, like phones and tablets, by adjusting layouts and sizes automatically.

intermediate

What does MediaQuery.of(context).orientation return?

It returns the current screen orientation as either Orientation.portrait or Orientation.landscape.

intermediate

How can MediaQuery help with font size adjustments?

You can use MediaQuery.of(context).textScaleFactor to scale text size according to user preferences or screen size, improving readability.

Which Flutter code gets the screen height using MediaQuery?

A MediaQuery.of(context).size.height

B MediaQuery.height(context)

C MediaQuery.screenHeight

D MediaQuery.getHeight()

The correct way is MediaQuery.of(context).size.height. The others are not valid Flutter syntax.

What does MediaQuery.of(context).padding provide?

A The size of the keyboard

B The margin around the app

C The safe area padding like status bar or notch

D The app's background color

MediaQuery.of(context).padding gives the padding needed to avoid system UI like status bars or notches.

How can you check if the device is in landscape mode?

A MediaQuery.of(context).orientation == Orientation.landscape

B MediaQuery.orientation == 'landscape'

C MediaQuery.landscape == true

D MediaQuery.of(context).isLandscape()

You compare MediaQuery.of(context).orientation to Orientation.landscape to check orientation.

Why should you avoid hardcoding sizes in Flutter apps?

A Because hardcoded sizes increase app size

B Because hardcoded sizes don't adapt to different screen sizes

C Because hardcoded sizes improve battery life

D Because hardcoded sizes make the app faster

Hardcoded sizes cause UI to look bad on different devices. Using responsive sizes like MediaQuery helps adapt layouts.

Which property helps scale text size according to user settings?

A MediaQuery.fontSize

B MediaQuery.scaleText

C MediaQuery.textSize

D MediaQuery.of(context).textScaleFactor

MediaQuery.of(context).textScaleFactor reflects the user's preferred text scaling for accessibility.

Explain how MediaQuery helps make a Flutter app responsive.

Think about how the app can adjust layout and text based on device info.

Describe a simple example of using MediaQuery to adjust a widget's width.

Imagine you want a box to be half the screen width.

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