Using MediaQuery for Responsive Design in Flutter

In the ever-evolving world of mobile applications, providing a seamless user experience across a wide array of devices is crucial. Using MediaQuery for Responsive Design in Flutter helps developers build flexible UI designs that adapt to various screen sizes, orientations, and pixel densities. In this blog post, we will explore how MediaQuery can be leveraged to create responsive layouts in Flutter applications.

Understanding MediaQuery in Flutter

MediaQuery is an essential tool in Flutter for responsive design. It allows developers to retrieve information about the size and orientation of the current screen, as well as the device’s pixel density. By using MediaQuery, developers can create adaptable UIs that provide a consistent experience across different devices. Here’s how you can use MediaQuery effectively in your Flutter applications:

import 'package:flutter/material.dart';

class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Retrieve screen width using MediaQuery
    double screenWidth = MediaQuery.of(context).size.width;
    // Check if the device is in landscape mode
    bool isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;

    return Scaffold(
      appBar: AppBar(title: Text('Responsive Design')),
      body: Center(
        child: Text(
          isLandscape ? 'Landscape Mode' : 'Portrait Mode',
          style: TextStyle(fontSize: screenWidth * 0.05),
        ),
      ),
    );
  }
}

In the above code, MediaQuery is used to obtain the screen width and orientation, allowing the text size to adjust dynamically based on the screen dimensions.

Implementing Responsive Layouts with MediaQuery

Using MediaQuery for Responsive Design in Flutter involves more than just adjusting text sizes. You can also use it to modify layout structures based on screen attributes. Consider the following example where we use MediaQuery to switch between different layouts:

import 'package:flutter/material.dart';

class AdaptiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Determine screen height and width
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;

    // Determine if the device is a tablet based on screen dimensions
    bool isTablet = width > 600;

    return Scaffold(
      appBar: AppBar(title: Text('Adaptive Layout')),
      body: isTablet ? TabletLayout() : MobileLayout(),
    );
  }
}

class TabletLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(child: Container(color: Colors.blue)),
        Expanded(child: Container(color: Colors.green)),
      ],
    );
  }
}

class MobileLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(child: Container(color: Colors.blue)),
        Expanded(child: Container(color: Colors.green)),
      ],
    );
  }
}

In this example, MediaQuery is used to check if the device is likely a tablet and switch between a row-based layout for tablets and a column-based layout for mobile phones, providing an optimal user interface for each device type.

In conclusion, using MediaQuery for Responsive Design in Flutter is a powerful technique that ensures your application looks great on any device. By understanding and implementing MediaQuery, you can craft designs that adapt to various screen sizes, enhancing the user experience significantly.