Share via


Ángulo de bisagra en Flutter

La bisagra de Surface Duo y otros dispositivos plegables contiene un sensor que nos indica el ángulo entre las dos pantallas. El valor angular de la bisagra oscila entre 0 y 360:

  • 0 : las pantallas se enfrentan entre sí y no están visibles. El dispositivo está cerrado.
  • 90 - El dispositivo es una forma "L" con las pantallas en el interior, a veces denominada portátil, tableta o modo de libro.
  • 180 - El dispositivo es plano. Las pantallas se enfrentan a la misma dirección.
  • 360 - Las pantallas se enfrentan a direcciones opuestas y solo una pantalla está funcionando.

Posición del dispositivo frente al ángulo de bisagra

El ángulo de la bisagra ya se usa para calcular la posición del dispositivo. La posición del dispositivo ya se expone a través de MediaQuery , pero hay situaciones en las que el ángulo de la bisagra es importante para la aplicación. Estos datos sin procesar no forman parte de MediaQuery, ya que esto actualizaría toda la aplicación con demasiada frecuencia. Para acceder a estos datos, puede usar el complemento dual_screen Flutter.

Medición del ángulo de la bisagra

Agregue dual_screen a la sección pub.dev dependencies .

dependencies:
  dual_screen: ^1.0.2+2

Importe y use en los archivos dardos.

import 'package:dual_screen/dual_screen_info.dart';

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

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

Ahora tiene acceso a dos nuevas propiedades estáticas:

  • hingeAngleEvents: transmite el flujo de eventos desde el sensor angular de bisagra del dispositivo. Si el dispositivo no está equipado con un sensor angular de bisagra, la secuencia no genera ningún evento.
  • hasHingeAngleSensor: futuro que devuelve true si el dispositivo tiene un sensor angular de bisagra. Como alternativa, si la aplicación ya usa MediaQuery.displayFeatures o MediaQuery.hinge para adaptarse a factores de forma plegables o de doble pantalla, puedes asumir de forma segura que existe el sensor angular de la bisagra y que hingeAngleEvents genera valores utilizables.

Muestra

Hay un ejemplo de código abierto disponible en esta página de GitHub. Puedes probarlo con los emuladores plegables normales disponibles en Android Studio o con el emulador de Surface Duo.

Flutter dual_screen ejemplo que se ejecuta en el emulador de Surface Duo

La diferencia entre el emulador de Surface Duo y otros dispositivos o emuladores es que admite ángulos de bisagra de 0 a 360 grados y también tiene dos pantallas independientes.

Ejemplo de flutter dual_screen que se ejecuta en un emulador plegable de Android Studio