Using LayoutBuilder and MediaQuery for Adaptive Layouts in Flutter

Creating responsive and adaptive user interfaces is essential for providing a seamless experience across various screen sizes and device orientations. Flutter offers two powerful tools to achieve this: LayoutBuilder and MediaQuery. Understanding how to effectively use these tools enables you to build Flutter apps that dynamically adapt to different screen configurations.

What are LayoutBuilder and MediaQuery in Flutter?

LayoutBuilder

LayoutBuilder is a widget that provides the constraints (size information) of its parent widget. It allows you to build UI components that adapt based on the available space in the layout. You can use this information to conditionally render different layouts or adjust widget properties.

MediaQuery

MediaQuery provides information about the current media (screen) your app is running on, such as screen size, orientation, pixel density, and more. It’s a crucial tool for making your app responsive to different devices and screen properties.

Why Use LayoutBuilder and MediaQuery?

• Responsiveness: Adapt your UI to different screen sizes and orientations.
• Adaptive UI: Dynamically change layouts based on available space.
• Consistency: Ensure a consistent user experience across devices.
• Flexibility: Easily adjust UI components for various screen densities and platforms.

How to Use LayoutBuilder in Flutter

LayoutBuilder is especially useful when you need to adjust the UI based on the available size of the parent widget.

Example 1: Simple Adaptation

Here’s an example of how to use LayoutBuilder to change the text size based on the available width:

import 'package:flutter/material.dart';

class LayoutBuilderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('LayoutBuilder Example')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return Center(
            child: Text(
              'Available Width: ${constraints.maxWidth.toStringAsFixed(2)}',
              style: TextStyle(
                fontSize: constraints.maxWidth > 600 ? 30 : 20, // Adjust font size
              ),
            ),
          );
        },
      ),
    );
  }
}

In this example, the font size changes based on whether the available width is greater than 600 pixels.

Example 2: Switching Layouts

Here’s an example of switching layouts (e.g., between a column and a row) based on available width:

import 'package:flutter/material.dart';

class AdaptiveLayoutExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Adaptive Layout Example')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > 600) {
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Expanded(child: buildCard('Card 1')),
                Expanded(child: buildCard('Card 2')),
              ],
            );
          } else {
            return Column(
              children: [
                buildCard('Card 1'),
                buildCard('Card 2'),
              ],
            );
          }
        },
      ),
    );
  }

  Widget buildCard(String text) {
    return Card(
      elevation: 4,
      margin: EdgeInsets.all(8),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text(text, style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

In this code, if the available width is greater than 600 pixels, the cards are displayed in a row; otherwise, they are displayed in a column.

How to Use MediaQuery in Flutter

MediaQuery provides access to device-specific information such as screen size, orientation, and pixel density.

Example 1: Accessing Screen Size

Here’s how to access screen size using MediaQuery:

import 'package:flutter/material.dart';

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

    return Scaffold(
      appBar: AppBar(title: Text('MediaQuery Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Screen Width: ${screenWidth.toStringAsFixed(2)}'),
            Text('Screen Height: ${screenHeight.toStringAsFixed(2)}'),
          ],
        ),
      ),
    );
  }
}

This example displays the width and height of the screen.

Example 2: Adapting to Orientation

Adapting UI elements based on device orientation can significantly improve user experience. Here’s how to use MediaQuery to adapt based on orientation:

import 'package:flutter/material.dart';

class OrientationAdaptiveExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      appBar: AppBar(title: Text('Orientation Adaptive Example')),
      body: Center(
        child: orientation == Orientation.portrait
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Portrait Mode', style: TextStyle(fontSize: 24)),
                  Icon(Icons.phone_android, size: 50),
                ],
              )
            : Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Landscape Mode', style: TextStyle(fontSize: 24)),
                  Icon(Icons.tablet_android, size: 50),
                ],
              ),
      ),
    );
  }
}

In this example, the UI displays different content depending on whether the device is in portrait or landscape mode.

Best Practices for Using LayoutBuilder and MediaQuery

• Combine Both Tools: Use LayoutBuilder for layout-specific adaptations and MediaQuery for device-specific adaptations.
• Avoid Deep Nesting: Deeply nested LayoutBuilder widgets can lead to performance issues. Simplify your layout where possible.
• Optimize for Multiple Orientations: Ensure your app works well in both portrait and landscape modes.
• Test on Various Devices: Always test your app on different screen sizes and resolutions.

Conclusion

LayoutBuilder and MediaQuery are essential tools for building responsive and adaptive UIs in Flutter. By using these tools effectively, you can ensure your app provides a great user experience across a wide range of devices and screen configurations. Understanding how to combine and use them strategically allows you to create dynamic and visually appealing interfaces that adapt to any environment.