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.