Flutter controls the powerful MediaQuery

Note: Unless otherwise specified, Flutter version and Dart versions are as follows:

• Flutter Version: 1.12.13 + hotfix.5
• Dart Version: 2.7.0

MediaQuery

Under normal circumstances, would not directly MediaQuery as a control, but rather MediaQuery.ofto obtain information about the current device is used as follows:

var data = MediaQuery.of(context);

This way must be placed MediaQuery scope, otherwise it will throw an exception, MaterialApp and WidgetsApp have introduced MediaQuery, and with the change of the screen caused by the reconstruction, such as rotate the screen to bring up the input box and so on.

MediaQueryData

MediaQueryData is MediaQuery.ofthe type of access to data. described as follows:

Attributes	Explanation
size	Logical pixel, the pixel is not physically, similar to the DP Android, logical pixel size will be displayed in different sizes on the same basic cell phone, physical pixel = size * devicePixelRatio.
devicePixelRatio	Logical unit number of physical pixels of pixels, i.e. pixel bit device.
textScaleFactor	Logical pixel unit pixels font, if the font is set to 1.5 is 50% larger than specified.
platformBrightness	The current brightness mode devices, such as power saving mode on Android Pie phone, all the App will be drawn using a dark color (dark) mode.
viewInsets	Occluded part of the system, generally refers to a keyboard, a pop-up keyboard, viewInsets.bottomrepresents the height of the keyboard.
padding	Occluded part of the system, typically referred to as "bangs screen" or system status bar.
viewPadding	Occluded part of the system, typically referred to as "bangs screen" or system status bar, independent of the value of this paddingand viewInsetstheir values from the MediaQuerystart of measurement edge of the control boundary. On mobile devices, usually a full screen.
systemGestureInsets	On the edge of the display system "consumed" in the area of ​​input events and prevent these events passed to the application. For example, the slide gesture Android Q for page navigation (ios, too), for example, the left slide to exit the current page.
physicalDepth	The maximum depth of the device, similar to the Z-axis of the three-dimensional space.
alwaysUse24HourFormat	Whether it is 24-hour clock.
accessibleNavigation	Whether the user interacts with the application TalkBack accessibility features such as VoiceOver, or to help visually impaired people use.
invertColors	Whether to support color inversion.
Higrcontrst	High contrast between foreground and background whether the user requirements, On iOS, is the "Settings" -> "Accessibility" -> "to increase the contrast." This flag update or above on an iOS device running iOS 13 only in the.
disableAnimations	Platform is required to disable or reduce as far as possible animation.
boldText	Whether the platform requires the use of bold.
orientation	Horizontal screen or vertical screen.

padding, viewPaddingAnd viewInsetsthe differences are as follows:

<img src="http://img.laomengit.com/mediaquery_2.png" alt="mediaquery_2" style="zoom:50%;" />

scenes to be used

Construction of different layout depending on the size

SafeArea control is through MediaQuery.ofto achieve, tablet and mobile phone (or a portrait and landscape screen) layout may be different, such as the following layout:

<img src="http://img.laomengit.com/mediaquery_1.png" alt="mediaquery_1" style="zoom:50%;" />

Layout code as follows:

var screenSize = MediaQuery.of(context).size;
if(screenSize.width>oneColumnLayout){
  //平板布局
}else{
  //手机布局
}

oneColumnLayoutIt represents a layout width.

System font changes

App has a lot of features that adjust the font size, achieved by MediaQuery, to achieve the following:

@override
  Widget build(BuildContext context) {
    var _data = MediaQuery.of(context).copyWith(textScaleFactor: 2.0);
    return Scaffold(
      appBar: AppBar(
        title: Text('老孟'),
      ),
      body: MediaQuery(
        data: _data,
        child: Text('字体变大'),
      ),
    );
  }

Font larger doubled.

communicate with

If you still have doubts or questions about the technical aspects of Flutter, Flutter welcome to join the exchange group (micro letter: laomengit).

I also welcome the attention of the public Flutter number [programmers] Lao Meng, public starting Flutter number of relevant content.

Recommend learning a Flutter address:http://laomengit.com which contains a plurality of detailed usage assemblies 150.