No MediaQuery widget ancestor found in Flutter: Causes and How to Fix

Wrap with a MaterialApp or WidgetsApp

• To use MediaQuery, your widget tree should be wrapped with a MaterialApp or WidgetsApp. These widgets provide essential services for your application, including the MediaQuery.

 

• If you're directly placing your widget as a root without wrapping it, you will encounter the "No MediaQuery widget ancestor found" error.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

Use Builder Widget

• If you need a MediaQuery and are inside a context where it's not available, consider using a Builder widget. This gives you a new context in which MediaQuery will be available.

 

• This is especially useful when you're inside a Scaffold and need to access MediaQuery properties, like padding.

Scaffold(
  body: Builder(
    builder: (BuildContext context) {
      var mediaQuery = MediaQuery.of(context);
      return Text('Width: ${mediaQuery.size.width}');
    },
  ),
)

Place Widgets Correctly in the Tree

• Make sure that your custom widgets that rely on MediaQuery are not placed before a MaterialApp or WidgetsApp. Place such widgets within the MaterialApp's child tree.

 

• Avoid placing widgets that use MediaQuery directly in the initState or build method of a StatelessWidget outside the framework's widget tree context.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Screen Width: ${mediaQuery.size.width}'),
      ),
    );
  }
}

Check Use of MediaQuery.of

• Ensure you're calling MediaQuery.of(context) within a method that provides a valid context accessible to a MediaQuery. If called in invalid contexts, it results in the error.

 

• Consider creating helper methods or classes if you're accessing MediaQuery in multiple places to avoid structural errors.

double deviceWidth(BuildContext context) {
  return MediaQuery.of(context).size.width;
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Device Width: ${deviceWidth(context)}'),
      ),
    );
  }
}