Flatter-Scharnier-Popuprouten

Wenn Ihre Anwendung auf dem Surface Duo überspannt ist, werden Dialoge auf dem ersten Bildschirm angezeigt, der der linke Bildschirm für Konfigurationen von links nach rechts ist. Mit dem optionalen Parameter anchorPoint für die showDialog -Methode können Sie dieses Verhalten überschreiben. Popupmenüs vermeiden standardmäßig das Scharnier. Wenn Ihr Code über benutzerdefinierte modale Routen verfügt, können Sie sie mit DisplayFeatureSubScreen umschließen, um eine Überschneidung des Scharniers zu vermeiden.

Standardmäßig wird dieses Dialogfeld auf dem linken Bildschirm für Konfigurationen von links nach rechts und der rechte Bildschirm für Rechts-nach-Links-Konfigurationen angezeigt:

showDialog(
    context: context,
    builder: (_) => AlertDialog(
        title: Text("Hinge Aware Dialog"),
        content: Text("Going on the left screen"),
    ),
);

Surface Duo Flutter Dialog auf dem linken Bildschirm

Wir können erzwingen, dass das Dialogfeld auf dem rechten Bildschirm angezeigt wird, indem wir den anchorPoint Parameter verwenden. Dies funktioniert wie ein Ziel, das wir verwenden können, um den gewünschten Bildschirm auszuwählen:

showDialog(
    context: context,
    builder: (_) => AlertDialog(
        title: Text("Hinge Aware Dialog"),
        content: Text("Going on the right screen"),
    ),
    anchorPoint: Offset(1000, 1000),
);

Surface Duo Flutter Dialog auf dem rechten Bildschirm

Benutzerdefinierte Routen

Möglicherweise verfügen Sie über eigene Modal- oder Popuproutenklassen in Ihrer App, die Sie auf Scharnier aufmerksam machen möchten. Verwenden Sie das DisplayFeatureSubScreen Widget, um Ihre modale Route zu umschließen. Fügen Sie es am oberen Rand Ihres Routenlayouts hinzu, um das Scharnier zu vermeiden. Dieses Widget benötigt auch einen anchorPoint Parameter:

class _MyRoute<T> extends PopupRoute<T> {
    @override
    Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
        return DisplayFeatureSubScreen(
            child: _myPageLayout(), // the previous content of buildPage
            anchorPoint: Offset.infinite,
        );
    }
}