MediaQuery gives you access to device and screen information like:
- Screen size (width & height)
- Orientation (portrait/landscape)
- Padding (safe area insets)
- Pixel ratio (for HD displays)
- Text scaling
Source Code
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(title: Text('MediaQuery Example')),
body: Center(
child: Container(
width: screenWidth * 0.8, // 80% of screen width
height: 200,
color: Colors.teal,
child: Center(
child: Text(
'Responsive Container',
style: TextStyle(color: Colors.white),
),
),
),
),
);
}
Ai Code Analizer
📐 Most Useful MediaQuery Properties
| Property | Description |
|---|---|
MediaQuery.of(context).size | Returns Size(width, height) of the screen |
orientation | Returns Orientation.portrait or landscape |
padding | Safe area insets (top notch, bottom bar, etc.) |
devicePixelRatio | Number of device pixels per logical pixel |
textScaleFactor | User-defined font scaling factor |
viewInsets | Info on keyboard space (useful for input forms) |