| Another exception was thrown: No MediaQuery widget found in Flutter: Causes and How to Fix

Another exception was thrown: No MediaQuery widget found in Flutter: Causes and How to Fix

February 10, 2025

Solve 'No MediaQuery widget found' in Flutter with our guide. Discover causes and step-by-step solutions to fix this common exception efficiently.

What is Another exception was thrown: No MediaQuery widget found Error in Flutter

Explaining the Error: "Another exception was thrown: No MediaQuery widget found"

This error indicates that certain widgets in Flutter need access to the device's media, such as size or orientation, but the hierarchy does not contain a `MediaQuery` widget at the point they are trying to access it.

Widgets like `Scaffold`, `MaterialApp`, and `CupertinoApp` inherently make use of `MediaQuery` and are generally used to create the root of the widget tree, ensuring `MediaQuery` is available further down the tree.

Function of MediaQuery in Flutter

`MediaQuery` provides several properties that are useful for building responsive UIs, such as screen size, screen orientation, and accessibility features like text scaling factors.

Even though many high-level widgets automatically include a `MediaQuery`, this widget can be explicitly added to the widget tree to provide these capabilities, especially when building custom layouts.

Interpolation Between Widgets and MediaQuery

Widgets can access `MediaQuery` data through `MediaQuery.of(context)`, which supplies the ambient `MediaQueryData` from the closest `MediaQuery` ancestor.

In scenarios where alignment, padding, or layout needs to respond to media data, ensure these variables are wrapped in a widget that has access to a `MediaQuery`.

Widget build(BuildContext context) {
  var mediaQuery = MediaQuery.of(context);
  return Container(
    padding: EdgeInsets.symmetric(
        vertical: mediaQuery.size.height * 0.10, 
        horizontal: mediaQuery.size.width * 0.05),
    child: Text('This container uses media query for padding'),
  );
}

Common Use Cases for MediaQuery

Determining device’s orientation for layouts: Utilizing the `Orientation` property from `MediaQuery`, developers can implement different layouts for portrait or landscape modes.

Implementing responsive designs: By using size parameters from `MediaQuery`, widgets can adapt to a variety of screen sizes for a better user experience.

Reading text scale factors: Respecting user preferences for larger or smaller text can improve accessibility by reading `textScaleFactor`.

Additional Considerations

While `MediaQuery` is immensely powerful, excessive use without consideration can lead to dependency issues or performance drops in large widget trees.

Understanding the structure and hierarchy of your widget tree is crucial for laying out Flutter applications effectively with `MediaQuery`.

class MyResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          return Scaffold(
            appBar: AppBar(title: Text('Responsive Example')),
            body: MediaQuery.of(context).orientation == Orientation.portrait
                ? _buildPortraitLayout()
                : _buildLandscapeLayout(),
          );
        },
      ),
    );
  }

  Widget _buildPortraitLayout() {
    return Column(children: [Text('Portrait Layout')]);
  }

  Widget _buildLandscapeLayout() {
    return Row(children: [Text('Landscape Layout')]);
  }
}

What Causes Another exception was thrown: No MediaQuery widget found in Flutter

Understanding the Error: "No MediaQuery widget found"

The error "No MediaQuery widget found" occurs in Flutter when a widget that requires information from the `MediaQuery` widget is placed somewhere in the widget tree where no `MediaQuery` is available.

Widgets such as `LayoutBuilder`, `MediaQuery.of()`, `OrientationBuilder`, and others naturally depend on `MediaQuery`. Without this context, they cannot function properly since they utilize the device's media information for layout and styling.

The `MediaQuery` widget is typically inserted automatically by the `MaterialApp` or `CupertinoApp` widget. By default, when building Flutter apps with a default app widget, media query data will be available in the widget tree.

If you construct a widget tree without a `MaterialApp` or `WidgetsApp` at the top level, the automatic insertion of `MediaQuery` won't occur, potentially leading to this exception if any child widgets require media context.

An example of where this might happen is when you try using media query properties directly in a widget without `MediaQuery` being high enough in the widget tree:
```
Widget myWidget(BuildContext context) {
  double width = MediaQuery.of(context).size.width; // Requires MediaQuery
  return Container(width: width);
}
```

Another scenario is creating a standalone widget where `MediaQuery` is accessed outside of its normal context flow, which could lead to the absence of the necessary `MediaQuery` data. For instance, placing such a widget outside or parallel to a `MaterialApp` widget could raise this error:

void main() {
  runApp(
    MyWidget(), // Error-prone if MyWidget uses MediaQuery somewhere
  );
}

Thus, understanding the widget's position in the hierarchy is crucial to ensure MediaQuery is accessible.

Additionally, even in a properly structured Flutter app, attempting to access `MediaQuery` values during the build process of a root-level widget, without having completed its build cycle through a `MaterialApp`, could inadvertently lead to this issue.

How to Fix Another exception was thrown: No MediaQuery widget found in Flutter

Add a MediaQuery Widget

Wrap your widget that requires media query properties with a MediaQuery widget if your widget is not being wrapped by the app’s MaterialApp or CupertinoApp. This widget provides information about the size and orientation of the current device, which typically is provided automatically by these app wrapper widgets.

For instance, if you're rendering widgets directly without an app wrapper, you can do this:

void main() {
  runApp(
    MediaQuery(
      data: MediaQueryData(),
      child: MyApp(),
    ),
  );
}

Ensure MaterialApp or CupertinoApp is Used

Ensure that your main app widget tree starts with either MaterialApp or CupertinoApp. These widgets automatically create a MediaQuery accessible to all widgets beneath them.

If not present, adjust your main function like this:

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

Use of Builder Widget

When you’re using widgets that consume the BuildContext directly, such as Scaffold or AppBar, and you need access to MediaQuery immediately, employ a Builder widget to provide a new context.

Example usage:

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Builder(
    builder: (context) {
      var mediaQuery = MediaQuery.of(context);
      return Center(
        child: Text('Width: ${mediaQuery.size.width}'),
      );
    },
  ),
);

Verification in Widget Tests

If you encounter this error during widget testing, make sure MediaQuery is properly set. Often it involves wrapping your widget under test with MaterialApp during the test widget creation.

Example test setup:

testWidgets('Widget has no MediaQuery', (WidgetTester tester) async {
  await tester.pumpWidget(
    MaterialApp(
      home: TestedWidget(),
    ),
  );

  // Perform your test assertions here
});

Adjust Widgets with Context Requirement

Some widgets are dependent on context initialized with a MediaQuery. Ensure you position such widgets (e.g., Dialogs, BottomSheets) within the widget tree that has a MediaQuery.

If implementing a custom widget, ensure it makes a call to the correct BuildContext :

class CustomWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);

    return Container(
      width: mediaQuery.size.width / 2,
      height: mediaQuery.size.height / 3,
    );
  }
}

By following these solutions, you can ensure that your Flutter app is setup to properly utilize media queries wherever needed, avoiding the "No MediaQuery widget found" exception.