Media Query Basics: Making Apps Responsive with Flutter

6.4.1 Media Query Basics

Welcome to the exciting world of responsive design in Flutter! In this section, we’ll explore how to make your apps look great on any device using MediaQuery. Whether your users are on a phone, tablet, or even a large-screen device, MediaQuery helps ensure your app’s layout adapts beautifully.

Understanding MediaQuery

MediaQuery is a powerful tool in Flutter that provides information about the device’s screen. This includes details like screen dimensions, orientation, and pixel density. By leveraging MediaQuery, you can create apps that adjust their layout and content dynamically, offering a seamless experience across different devices.

Key Concepts

Let’s dive into some key concepts that MediaQuery helps us manage:

• Screen Dimensions: MediaQuery allows you to retrieve the width and height of the screen, enabling you to adjust your app’s layout based on available space.
• Orientation: You can detect whether the device is in portrait or landscape mode, allowing you to change the layout accordingly.
• Device Pixel Ratio: This ensures that images and text appear at appropriate sizes, maintaining clarity and readability.

Code Example: Using MediaQuery

Here’s a simple Flutter app that demonstrates how to use MediaQuery to access screen information:

import 'package:flutter/material.dart';

void main() {
  runApp(MediaQueryBasicsApp());
}

class MediaQueryBasicsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MediaQuery Basics'),
        ),
        body: LayoutBuilder(
          builder: (context, constraints) {
            var screenWidth = MediaQuery.of(context).size.width;
            var screenHeight = MediaQuery.of(context).size.height;
            var orientation = MediaQuery.of(context).orientation;

            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Screen Width: $screenWidth',
                    style: TextStyle(fontSize: 18),
                  ),
                  Text(
                    'Screen Height: $screenHeight',
                    style: TextStyle(fontSize: 18),
                  ),
                  Text(
                    'Orientation: $orientation',
                    style: TextStyle(fontSize: 18),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

Explanation:

• MediaQuery.of(context).size: Retrieves the current screen’s width and height.
• MediaQuery.of(context).orientation: Determines if the device is in portrait or landscape mode.
• The app displays this information on the screen, helping you understand how MediaQuery works.

Activity: Create Responsive Layouts

Let’s put MediaQuery into action with a fun activity!

Step 1: Create an App with Different Layouts

• Portrait Mode: Display a vertical list of images.
• Landscape Mode: Display images in a horizontal grid.

Here’s a basic structure to get you started:

import 'package:flutter/material.dart';

void main() {
  runApp(ResponsiveLayoutApp());
}

class ResponsiveLayoutApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Responsive Layout'),
        ),
        body: OrientationBuilder(
          builder: (context, orientation) {
            return orientation == Orientation.portrait
                ? VerticalImageList()
                : HorizontalImageGrid();
          },
        ),
      ),
    );
  }
}

class VerticalImageList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: List.generate(10, (index) {
        return Image.network('https://via.placeholder.com/150');
      }),
    );
  }
}

class HorizontalImageGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: List.generate(10, (index) {
        return Image.network('https://via.placeholder.com/150');
      }),
    );
  }
}

Explanation:

• OrientationBuilder: A widget that rebuilds its child when the orientation changes.
• VerticalImageList: Displays images in a vertical list for portrait mode.
• HorizontalImageGrid: Displays images in a grid for landscape mode.

Step 2: Test on Different Devices

Encourage testing the app on phones and tablets to see how MediaQuery adapts the layout. Notice how the app changes its layout based on the device’s orientation!

Visualizing MediaQuery with a Flowchart

To better understand how MediaQuery adapts layouts, let’s look at a flowchart:

    flowchart TB
	    A[Start App] --> B[Check Screen Width and Orientation]
	    B --> C{Portrait or Landscape?}
	    C -- Portrait --> D[Display Vertical List]
	    C -- Landscape --> E[Display Horizontal Grid]
	    D --> F[End]
	    E --> F

This flowchart illustrates the decision-making process in your app, showing how it chooses between different layouts based on screen properties.

Engaging with Responsive Design

Think of responsive design like adjusting furniture for different room sizes. Just as you might rearrange a room to fit a new sofa, you adjust your app’s layout to fit different screens. This ensures your app looks good and functions well, no matter where it’s used.

Encouragement and Exploration

As you explore MediaQuery, consider how your apps can look great on both phones and tablets. Responsive design is a crucial skill in app development, and mastering it will make your apps more versatile and user-friendly.

Quiz Time!

By understanding and utilizing MediaQuery, you’re on your way to creating apps that are not only functional but also visually appealing across a wide range of devices. Keep experimenting and exploring the possibilities of responsive design in Flutter!