MediaQuery for responsiveness in Flutter - Mini App: Build & Ship

Build: Responsive Welcome Screen

A simple welcome screen that adjusts its layout and text size based on the device screen size using MediaQuery.

Target UI

-------------------------
|                       |
|    Welcome to App!     |
|                       |
|  [Get Started Button]  |
|                       |
-------------------------

Use MediaQuery to get screen width and height

Adjust the font size of the welcome text based on screen width

Center the welcome text and button vertically and horizontally

Add a button labeled 'Get Started' below the welcome text

Make sure the button width is 60% of the screen width

Starter Code

Flutter

import 'package:flutter/material.dart';

class ResponsiveWelcomeScreen extends StatelessWidget {
  const ResponsiveWelcomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: Use MediaQuery to get screen size
    // TODO: Adjust font size and button width based on screen size
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // TODO: Add welcome text with responsive font size
            // TODO: Add Get Started button with responsive width
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class ResponsiveWelcomeScreen extends StatelessWidget {
  const ResponsiveWelcomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final screenWidth = size.width;
    final screenHeight = size.height;

    final double fontSize = screenWidth * 0.08; // 8% of screen width
    final double buttonWidth = screenWidth * 0.6; // 60% of screen width

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Welcome to App!',
              style: TextStyle(
                fontSize: fontSize,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 30),
            SizedBox(
              width: buttonWidth,
              child: ElevatedButton(
                onPressed: () {},
                child: const Text('Get Started'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses MediaQuery.of(context).size to get the device's screen width and height.

The font size for the welcome text is set to 8% of the screen width, so it scales nicely on small and large devices.

The 'Get Started' button width is set to 60% of the screen width using a SizedBox to keep it responsive.

The text and button are centered vertically and horizontally using a Column inside a Center widget.

Final Result

Completed Screen

-------------------------
|                       |
|    Welcome to App!     |
|                       |
|  [Get Started Button]  |
|                       |
-------------------------

User sees the welcome text sized nicely for their screen

User taps the 'Get Started' button (currently does nothing)

Stretch Goal

Make the welcome text color change based on screen height (e.g., blue if height > 700, else green).

💡 Hint

Use MediaQuery to get screen height and a conditional expression to set the TextStyle color.

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