MediaQuery vs LayoutBuilder in Flutter

In Flutter, both MediaQuery and LayoutBuilder are used to build responsive UIs, but they serve different purposes and have different use cases. Here's a detailed comparison to help you understand when and why you might use each of these widgets.

MediaQuery
What is MediaQuery?
MediaQuery is a widget that provides information about the size, orientation, and other properties of the device's screen and the current app's environment. It is used for querying the current media properties such as screen dimensions, text scale factor, and device pixel ratio.

Key Features:

• Global Context: MediaQuery provides information based on the BuildContext in which it is called.
• Access to Screen Size: You can use MediaQuery to get screen width, height, and other dimensions.
• Performance: Accessing MediaQuery data is relatively cheap and doesn't rebuild widgets unnecessarily.

Typical Use Cases:

• Adjusting layout based on screen size.
• Creating responsive designs where you need to access screen dimensions or orientation.
• Implementing logic that depends on the device’s properties, such as adjusting font sizes based on screen size or text scale factor.

Example Usage:

Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  return Container(
    width: screenWidth * 0.5,
    child: Text('Hello World'),
  );
}

Pros:

• Simple and direct way to access screen size and other media properties.
• Best for global or static queries about the environment.

Cons:

• Accessing MediaQuery in build method can cause inefficiencies if overused, as it does not listen to changes in layout.

LayoutBuilder
What is LayoutBuilder?
LayoutBuilder is a widget that allows you to build a widget tree based on the parent’s constraints. It gives you the ability to adapt your widget’s layout according to the constraints passed by its parent.

Key Features:

• Constraint-Based: LayoutBuilder provides constraints from the parent widget, allowing you to build widgets based on the available space.
• Dynamic Layouts: It rebuilds whenever the parent’s constraints change, allowing for more flexible and adaptive layouts.

Typical Use Cases:

• Creating layouts that need to adapt to the parent’s constraints.
• Building complex, responsive UI elements that need to change when the available space changes.
• When you need to build widgets based on the parent widget’s size and constraints.

Example Usage:

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      final maxWidth = constraints.maxWidth;
      return Container(
        width: maxWidth * 0.5,
        child: Text('Hello World'),
      );
    },
  );
}

Pros:

• More flexible for dynamic layouts that need to adjust to changing constraints.
• Provides a mechanism to react to changes in the parent widget’s constraints.

Cons:

• Slightly more complex to use than MediaQuery.
• Can lead to excessive rebuilds if not used carefully.

When to Use Each

• Use MediaQuery when you need to query the device’s properties or global environment settings. It’s ideal for static information that doesn’t depend on the parent’s size or constraints.

• Use LayoutBuilder when you need to build a widget based on the constraints provided by the parent widget. It’s perfect for creating adaptive and responsive layouts that change according to available space.