영어로 읽기

다음을 통해 공유


Hinge angle on Flutter

The hinge on the Surface Duo and other foldable devices contains a sensor that tells us the angle between the two screens. The hinge angle value ranges from 0 to 360:

  • 0 - Screens are facing each other, and not visible. Device is closed.
  • 90 - Device is an "L" shape with the screens on the inside, sometimes referred to as laptop, tabletop, or book mode.
  • 180 - Device is flat. Screens are facing the same direction.
  • 360 - Screens are facing opposite directions and only one screen is operating.

Device posture vs hinge angle

The hinge angle is already used to calculate the device posture. The device posture is already exposed through MediaQuery — but there are situations where the hinge angle itself is important for your app. This raw data is not part of MediaQuery, as this would update your whole app too often. To access this data, you can use the dual_screen Flutter plugin.

Measure the hinge angle

Add dual_screen to your pub.dev dependencies section.

dependencies:
  dual_screen: ^1.0.2+2

Import and use in your dart files.

import 'package:dual_screen/dual_screen_info.dart';

DualScreenInfo.hingeAngleEvents.listen((double hingeAngle) {
  print(hingeAngle);
});

DualScreenInfo.hasHingeAngleSensor.then((bool hasHingeSensor) {
  print(hasHingeSensor);
});

You now have access to two new static properties:

  • hingeAngleEvents: Broadcast stream of events from the device hinge angle sensor. If the device is not equipped with a hinge angle sensor, the stream produces no events.
  • hasHingeAngleSensor: Future returning true if the device has a hinge angle sensor. Alternatively, if your app already uses MediaQuery.displayFeatures or MediaQuery.hinge to adapt to foldable or dual-screen form factors, you can safely assume the hinge angle sensor exists and that hingeAngleEvents produces usable values.

Sample

There is an open-source sample available on this GitHub page. You can test it using the regular foldable emulators available in Android Studio or using the Surface Duo emulator.

Flutter dual_screen sample running on the Surface Duo emulator

The difference between the Surface Duo emulator and other devices or emulators is that it supports hinge angles from 0 to 360 degrees and also has two separate screens.

Flutter dual_screen sample running on an Android Studio foldable emulator