MediaQuery for responsiveness in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the screen width using MediaQuery.

Flutter

double screenWidth = MediaQuery.of(context).[1].width;

Drag options to blanks, or click blank then click option'

AdevicePixelRatio

Borientation

Cpadding

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'orientation' instead of 'size' will not give width.

Using 'padding' or 'devicePixelRatio' does not provide screen dimensions.

The size property of MediaQueryData gives the screen size, including width and height.

2fill in blank

medium

Complete the code to check if the device is in landscape mode using MediaQuery.

Flutter

bool isLandscape = MediaQuery.of(context).orientation == [1].landscape;

Drag options to blanks, or click blank then click option'

AMediaQuery

BOrientation

CScreen

DDeviceOrientation

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'MediaQuery.landscape' is incorrect because 'landscape' is part of Orientation enum.

Using 'DeviceOrientation' is a different enum used for sensors, not MediaQuery.

The Orientation enum has values portrait and landscape to compare with MediaQuery orientation.

3fill in blank

hard

Fix the error in the code to get the height excluding padding (like status bar) using MediaQuery.

Flutter

double height = MediaQuery.of(context).size.height - MediaQuery.of(context).[1].top;

Drag options to blanks, or click blank then click option'

Apadding

BviewPadding

CviewInsets

DpaddingInsets

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'viewPadding' or 'viewInsets' is incorrect for this purpose.

There is no 'paddingInsets' property.

The padding property gives the parts of the screen obscured by system UI like status bar.

4fill in blank

hard

Fill both blanks to create a Container that is half the screen width and a quarter of the screen height.

Flutter

Container(width: MediaQuery.of(context).size.[1] / 2, height: MediaQuery.of(context).size.[2] / 4, color: Colors.blue);

Drag options to blanks, or click blank then click option'

Awidth

Bheight

Corientation

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'orientation' or 'padding' instead of width or height will cause errors or wrong sizes.

The width and height properties of MediaQuery size give screen dimensions to calculate container size.

5fill in blank

hard

Fill all three blanks to create a Text widget that shows screen width, height, and orientation.

Flutter

Text('Width: ${MediaQuery.of(context).size.[1], Height: ${MediaQuery.of(context).size.[2], Orientation: ${MediaQuery.of(context).[3]');

Drag options to blanks, or click blank then click option'

Awidth

Bheight

Corientation

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding instead of orientation will show wrong info.

Mixing up width and height properties.

This code shows screen width and height from size, and orientation from MediaQuery directly.