Flutter App Screen Size

To get the screen size in Flutter, we use a class called MediaQuery.

In addition to the screen size, Mediaquery contains system information of various devices.

(Text magnification, 24 hour format, device orientation, etc.)

Here's how to read the screen information using MediaQuery:

MediaQuery.of(context).size             // App screen size size Ex> Size (360.0, 692.0)
MediaQuery.of(context).size.height      // App screen height double Ex> 692.0
MediaQuery.of(context).size.width       // App screen width double Ex> 360.0
MediaQuery.of(context).devicePixelRatio // screen magnification double Ex> 4.0
MediaQuery.of(context).padding.top      // Top status bar height double Ex> 24.0

Here, context is an app's Context class variable.

The above values ​​are logical pixel values, not actual pixel values. Multiplying this by the screen magnification (devicePixelRatio) gives the actual pixel value.

For reference, the actual pixel values ​​can also be read in the following manner.

import 'dart:ui';

window.physicalSize // App screen pixel size size Ex> Size (1440.0, 2768.0)

But what matters here is the logical pixel value and magnification, rather than the actual pixel value.

If you run the above code in an actual app and take a picture, it is as follows.

import 'package:flutter/material.dart';
import 'dart:ui';

void main() {
	runApp(MyApp());
}

class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
		title: 'Get Screen Size',
		home: MainPage(),
	);
	}
}

class MainPage extends StatefulWidget {
	MainPage({Key key}) : super(key: key);

	@override
	_MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
		body: Center(      
		child: Column(        
		mainAxisAlignment: MainAxisAlignment.center,
		crossAxisAlignment: CrossAxisAlignment.start,
		children: <Widget>[
			Text('displaySize : ${MediaQuery.of(context).size}'),
			Text('displayHeight : ${MediaQuery.of(context).size.height}'),
			Text('displayWidth : ${MediaQuery.of(context).size.width}'),
			Text('devicePixelRatio : ${MediaQuery.of(context).devicePixelRatio}'),
			Text('statusBarHeight : ${MediaQuery.of(context).padding.top}'),
			Text('window.physicalSize : ${window.physicalSize}'),          
			],
		),
		),
	);
	}
}

And the execution result is as follows.

It is the screen executed on the Galaxy S9, and if you look at the value, you can see that it is 360.0 X 692.0.

Also, it can be seen that the screen magnification is 4.0.

As mentioned above, it is said that the actual pixel value can be obtained by multiplying the logical pixel value by the screen magnification.

That is, if 360.0 * 4.0, the width pixel value of the actual app screen is displayed, and if 692.0 * 4.0, the height pixel value of the actual app screen is displayed.

And the above value is the size of the area where the app is displayed. From the top, statusBarHeight shows the size of the top status bar. This, too, should be multiplied by the magnification to get the pixel value.

First of all, when configuring the screen layout, you can fit the above "logical pixel size" as standard or use Flex to configure the ratio.

In addition, since the image is related to the screen magnification, multiple images must be added to each magnification as shown below to insert the correct image.

	assets/images/my_icon.png
	assets/images/2.0x/my_icon.png
	assets/images/3.0x/my_icon.png
	assets/images/4.0x/my_icon.png

If there is no device magnification, it is said that the closest image is used.

For example, it is assumed that ... / 2.0x / my_icon.png is used for 1.8 magnification and 3.0x is used for 2.7 magnification.

You can refer to the link below for more details.

https://flutter.dev/docs/development/ui/assets-and-images

Adding assets and images