[Solved] No MediaQuery widget found Error in Flutter
Introduction
The “No MediaQuery widget found” error is a common issue in Flutter that occurs when the MaterialApp or CupertinoApp widget is not properly wrapped with a MediaQuery widget. This error is usually encountered when trying to access the MediaQuery.of(context) in a Flutter widget tree. In this article, we will discuss the cause of this error and provide a solution to resolve it.
Cause of the Error
The “No MediaQuery widget found” error is caused by the absence of a MediaQuery widget in the widget tree. The MediaQuery widget is responsible for providing information about the device’s screen size, density, and orientation. When a widget tries to access the MediaQuery.of(context) without a MediaQuery widget in its ancestors, Flutter throws this error.
Solution
To solve this error, you need to wrap your MaterialApp or CupertinoApp widget with a MaterialApp or CupertinoApp widget that has a MediaQuery widget in its ancestors. Here is an example:
“`dart
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘MediaQuery Demo’,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Accessing MediaQuery
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: AppBar(
title: Text(‘MediaQuery Demo’),
),
body: Center(
child: Text(‘Screen Width: $screenWidth, Screen Height: $screenHeight’),
),
);
}
}
“`
In the above code, the MaterialApp widget is the ancestor of the MyHomePage widget, and it provides the MediaQuery widget to its descendants.
Alternative Solution
If you are using a custom widget tree without a MaterialApp or CupertinoApp widget, you can manually create a MediaQuery widget and wrap your custom widget tree with it. Here is an example:
“`dart
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return OverlayEntry(
builder: (context) => MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MediaQuery(
data: MediaQueryData(),
child: Scaffold(
appBar: AppBar(
title: Text(‘MediaQuery Demo’),
),
body: Center(
child: Text(‘MediaQuery widget found’),
),
),
);
}
}
“`
In the above code, we manually create a MediaQuery widget and wrap the MyHomePage widget with it.
Conclusion
In conclusion, the “No MediaQuery widget found” error in Flutter is caused by the absence of a MediaQuery widget in the widget tree. This error can be resolved by wrapping the MaterialApp or CupertinoApp widget with a MediaQuery widget or manually creating a MediaQuery widget and wrapping the custom widget tree with it.
FAQ
1. What is the purpose of the MediaQuery widget in Flutter?
The MediaQuery widget provides information about the device’s screen size, density, and orientation.
2. Why does the “No MediaQuery widget found” error occur in Flutter?
The “No MediaQuery widget found” error occurs when a widget tries to access the MediaQuery.of(context) without a MediaQuery widget in its ancestors.
3. How to fix the “No MediaQuery widget found” error in Flutter?
To fix this error, you need to wrap your MaterialApp or CupertinoApp widget with a MaterialApp or CupertinoApp widget that has a MediaQuery widget in its ancestors.
4. Can I manually create a MediaQuery widget in Flutter?
Yes, you can manually create a MediaQuery widget and wrap your custom widget tree with it.
5. Is the MediaQuery widget required in every Flutter app?
Yes, the MediaQuery widget is required in every Flutter app to provide information about the device’s screen size, density, and orientation.
