Flutter Course: 12.4 MediaQuery.of(context)

Flutter provides various widgets to deliver a consistent user interface across different platforms. Among them, MediaQuery is used to obtain various information such as the screen size, orientation, and resolution of the device. This tutorial will explain in detail how to use MediaQuery.of(context).

1. What is MediaQuery?

MediaQuery is one of the built-in widgets in Flutter that helps adjust the app’s UI to fit the device’s screen size and properties. It allows the UI to be optimized by determining the environment of the device.

2. Basic Usage of MediaQuery.of(context)

Using MediaQuery.of(context), you can get the MediaQueryData for the current BuildContext. For example, here’s how to obtain the screen width and height:

    var mediaQuery = MediaQuery.of(context);
    var screenWidth = mediaQuery.size.width;
    var screenHeight = mediaQuery.size.height;
    

3. Creating Layouts Using MediaQuery

You can utilize media queries to create appropriate layouts for various screen sizes. For example, you can display different widgets based on the screen size.

    @override
    Widget build(BuildContext context) {
        var screenWidth = MediaQuery.of(context).size.width;
        return Scaffold(
            appBar: AppBar(title: Text('MediaQuery Example')),
            body: Center(
                child: screenWidth < 600
                    ? Text('Small Screen')
                    : Text('Big Screen'),
            ),
        );
    }
    

4. Utilizing MediaQuery for Dynamic UI Design

In Flutter, you can dynamically design the UI to fit various screen sizes. The following example shows how to apply different Padding based on screen size.

    @override
    Widget build(BuildContext context) {
        var padding = MediaQuery.of(context).size.width < 600 ? EdgeInsets.all(20) : EdgeInsets.all(50);
        return Padding(
            padding: padding,
            child: Text('Dynamic Padding Example'),
        );
    }
    

5. Explanation of MediaQueryData Properties

MediaQueryData provides various properties. Here are the explanations:

• size: The size of the device's screen (Width, Height)
• orientation: The orientation of the device (Portrait, Landscape)
• devicePixelRatio: The pixel density of the screen
• padding: The padding of the screen (Safe Area)
• viewInsets: The portion of the screen affected by UI elements such as the software keyboard

6. Use Cases for MediaQuery

Here are some examples of using MediaQuery in real apps. Key cases include responsive design, support for various devices, and dynamic layout adjustments.

6.1 Example of Responsive Design

An example of an app utilizing responsive design is adjusting the number of items in a list view based on the screen width. Here, we will explain how to dynamically change the number of columns.

6.2 Support for Various Devices

By utilizing MediaQuery, you can easily design apps that support various resolutions and aspect ratios. For example, you can create UI elements tailored to the characteristics of each device.

7. Conclusion

MediaQuery is a crucial element for constructing layouts tailored to the device's environment in Flutter. This tutorial covered the basic usage of MediaQuery.of(context) and its use cases. Feel free to experiment with more features and application cases.