Note: The Flutter and Dart versions are as follows without special instructions:

  • Flutter version: 1.12.13+ Hotfix.5
  • Dart version: 2.7.0

MediaQuery

In general, MediaQuery is not treated as a control directly. Instead, mediaQuery.of is used to get information about the current device as follows:

var data = MediaQuery.of(context);Copy the code

This method must be in MediaQuery scope, otherwise an exception will be thrown. Both MaterialApp and WidgetsApp introduce MediaQuery, and rebuild as the screen changes, such as rotating the screen, popping up an input box, etc.

MediaQueryData

MediaQueryData is the type of data retrieved by mediaQuery.of. The instructions are as follows:

attribute instructions
size Logical pixel, not physical pixel, is similar to DP in Android. Logical pixel will display the same size on phones of different sizes. Physical pixel = size*devicePixelRatio.
devicePixelRatio The number of physical pixels per logical pixel, the device pixel ratio.
textScaleFactor Font pixels per logical pixel, 50% larger than the specified font if set to 1.5.
platformBrightness All apps will be drawn in dark mode when the current device is in brightness mode, such as when it goes into power saving mode on Android Pie phones.
viewInsets The part that is obscured by the system, usually the keyboard, the pop-up keyboard,viewInsets.bottomRepresents the height of the keyboard.
padding The part of the screen that is obscured by the system, usually “bangs” or the system status bar.
viewPadding The part obscured by the system, usually referred to as the “fringe” or the system status bar, is independent of the valuepaddingandviewInsets, their values go fromMediaQueryThe edge of the control boundary is measured. On mobile devices, it’s usually full screen.
systemGestureInsets The area on the edge of the display that the system “consumes” inputs events and prevents them from being passed on to the application. For example, on Android Q, gesture swiping is used to navigate the page (as is ios), for example, swipe left to exit the current page.
physicalDepth The maximum depth of the device, similar to the Z-axis in three dimensions.
alwaysUse24HourFormat Is it a 24-hour system?
accessibleNavigation Whether the user interacts with the application using assistive features such as TalkBack or VoiceOver, which are used to help visually impaired people.
invertColors Whether color inversion is supported.
highContrast Whether the user requires a high contrast between foreground and background, on iOS, by going to Settings -> Accessibility -> Increase Contrast. This flag is only updated or higher on iOS devices running iOS 13.
disableAnimations Whether the platform requires that animations be disabled or reduced as much as possible.
boldText Whether the platform requires bold.
orientation Landscape or portrait.

The difference between the padding, viewPadding, and viewInsets is as follows:

Usage scenarios

Build different layouts based on size

The SafeArea control is implemented using mediaQuery.of. The layout of the tablet and phone (or landscape and portrait) may be different, such as the following:

The layout code is as follows:

var screenSize = MediaQuery.of(context).size; If (screensize. width>oneColumnLayout){// screenSize}else{// mobile layout}Copy the code

OneColumnLayout represents the width of a column of layouts.

System font changes

Many apps have a function to adjust the font size. MediaQuery implements this function as follows:

@override Widget build(BuildContext context) {var _data = mediaQuery.of (context).copywith (textScaleFactor: 2.0); Return Scaffold(appBar: appBar (title: Text(' laomong '),), body: MediaQuery(data: _data, child: Text(' font size changed '),); }Copy the code

The font is twice as big.

communication

If you have any questions or technical questions about Flutter, please join the Flutter community.

Also welcome to follow my public account of Flutter. My public account is about Flutter.

The recommended site for Flutter learning is laomengit.com, which contains detailed usage of more than 150 Flutter components.