Flutter MediaQuery for Surface Duo

Important

This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft makes no warranties, express or implied, with respect to the information provided here.

MediaQuery is the component you use in Flutter when you want information about the device, like the screen size, display density, text scaling, and so on. The hinge between the displays is considered a part of the display. When your app is spanned, the screen size for it is the whole area of both screens, including the hinge, with the hinge area being reported as a display feature.

Tip

You can now use the MediaQuery support by switching to the Flutter master channel, using the flutter channel master command.

New MediaQuery properties

  • displayFeatures -> List<DisplayFeature> - Areas of the display that are obstructed by hardware features.

Display features

Display features are areas of the display that can be non-functional or obstructed.

class DisplayFeature {
    final Rect bounds;
    final DisplayFeatureType type;
    final DisplayFeatureState state;
}

Properties of a DisplayFeature:

  • bounds - Rect area of the view occupied by this display feature
  • type - Enum for type of display features:
    • hinge - A physical separator between the two displays of the device. Surface Duo has a hinge display feature. Display Feature Type: Hinge
    • fold - View this as a hinge that has zero width. It identifies where the flexible display has a crease. Display Feature Type: Fold
    • cutout - Sits at the edge of the display and usually houses camera systems. Display Feature Type: Cutout
  • state - Enum for posture of display feature, which is populated only for folds and hinges. For cutouts, this is unknown. This closely follows the Posture definition from Android.
    • halfOpened - The foldable device's hinge is in an intermediate position between opened and closed state, there is a non-flat angle between parts of the flexible screen or between physical screen panels.
    • flat - The foldable device is completely open, the screen space that is presented to the user is flat.
    • unknown - Posture is unknown, either because it is new and unsupported or, in the case of cutout features, it is not populated.