Rotas pop-up com conhecimento de dobradiça do Flutter

Importante

Este artigo descreve funcionalidades e diretrizes que estão em versão prévia pública e podem ser modificadas substancialmente antes de passarem para a disponibilidade geral. A Microsoft não faz nenhuma garantia, expressa ou implícita, com relação às informações fornecidas aqui.

As caixas de diálogo são exibidas no meio da tela por padrão. Em dispositivos com uma dobradiça, as caixas de diálogo vão para a primeira tela, que é a tela esquerda para configurações da esquerda para a direita. Há um parâmetro opcional screen no método que permite substituir esse showDialog comportamento. Menus de contexto ou pop-up evitam a dobradiça por padrão.

Por padrão, essa caixa de diálogo aparece na tela esquerda para dispositivos configurados da esquerda para a direita:

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

Caixa de diálogo Flutter do Surface Duo na tela esquerda

Podemos forçar a caixa de diálogo a ir para a segunda tela, que é a tela direita para dispositivos configurados da esquerda para a direita:

showDialog(
    context: context,
    builder: (_) => AlertDialog(
        title: Text("Hinge Aware Dialog"),
        content: Text("Going on the right screen"),
    ),
    screen: 1, // By default, this is 0
);

Caixa de diálogo Flutter do Surface Duo na tela à direita

Você pode ter suas próprias classes de rota modal ou pop-up em seu aplicativo, que você deseja tornar com base em dobradiça. Fornecemos um widget chamado que você adiciona na parte superior de seu layout de HingeAvoidingModalWrapper rota para evitar a dobradiça. Esse widget também recebe um screen parâmetro:

class _MyRoute<T> extends PopupRoute<T> {
    @override
    Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
        return HingeAvoidingModalWrapper(
            child: _myPageLayout(),
            screen: 1 // By default, this is 0
        );
    }
}