Flutter: Screen-Based Scaling with MediaQuery

Flutter MediaQuery - Screen-Based Scaling

MediaQuery is a powerful tool in Flutter that provides detailed information about the device's screen properties. You can create responsive designs by getting information about screen size, density, orientation and more.

What is MediaQuery?

MediaQuery is a class accessed from BuildContext that provides the device's media properties. It offers information like screen width, height, pixel density, safe area.

Basic Usage

Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  final screenWidth = mediaQuery.size.width;
  final screenHeight = mediaQuery.size.height;
  
  return Container(
    width: screenWidth * 0.8,   // 80% of screen
    height: screenHeight * 0.5, // 50% of screen
    color: Colors.blue,
    child: Center(
      child: Text('$screenWidth x $screenHeight'),
    ),
  );
}

MediaQuery Properties

size (Screen Size)

final size = MediaQuery.of(context).size;
final width = size.width;    // Screen width (dp/logical pixels)
final height = size.height;  // Screen height (dp/logical pixels)

print('Screen: ${width}x${height}');

devicePixelRatio (Pixel Density)

final pixelRatio = MediaQuery.of(context).devicePixelRatio;

// Physical pixel count
final physicalWidth = size.width * pixelRatio;
final physicalHeight = size.height * pixelRatio;

print('Pixel density: $pixelRatio');
print('Physical size: ${physicalWidth}x${physicalHeight}');

orientation (Orientation)

final orientation = MediaQuery.of(context).orientation;

if (orientation == Orientation.portrait) {
  print('Portrait mode');
} else {
  print('Landscape mode');
}

Proportional Sizing Examples

Width Ratio

Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  
  return Container(
    width: screenWidth * 0.9,  // 90% of screen
    padding: EdgeInsets.all(16),
    child: Text('Content'),
  );
}

Height Ratio

Widget build(BuildContext context) {
  final screenHeight = MediaQuery.of(context).size.height;
  
  return Container(
    height: screenHeight * 0.3,  // 30% of screen
    color: Colors.blue,
    child: Center(child: Text('Banner')),
  );
}

MediaQuery vs LayoutBuilder

MediaQuery

// Full screen information
final screenWidth = MediaQuery.of(context).size.width;

• Gives device's full screen size
• Accessible from anywhere
• Requires BuildContext

LayoutBuilder

// Parent widget's size
LayoutBuilder(
  builder: (context, constraints) {
    final localWidth = constraints.maxWidth;
    return Container(width: localWidth);
  },
)

• Gives parent widget's size
• Local information in widget tree
• More specific control

When to use which?

• MediaQuery: General decisions based on screen width/height
• LayoutBuilder: Special sizing based on parent container

Summary

MediaQuery:

• Provides screen dimensions (size.width, size.height)
• Provides safe area information (padding)
• Detects keyboard state (viewInsets)
• Controls orientation (orientation)
• Provides theme information (platformBrightness)
• Provides pixel density (devicePixelRatio)

Proportional Design Tips:

• For width: screenWidth * 0.x
• For height: screenHeight * 0.x
• Standard ratios: 0.1 (10%), 0.5 (50%), 0.9 (90%)
• Padding: 3-5% of screen
• Font: 4-6% of width (for headings)

MediaQuery is the cornerstone of making responsive applications that adapt to device properties in Flutter!