Remover várias rotas

[Zeca-dev]

Estou com o seguinte problema: naveguei para um certo número de rotas e quero voltar para a primeira página. Então chamo popUntil e volto, porém todas as animações desse trajeto são exibidas, quando eu gostaria de mostar apenas a animção da primeira página. Alguém sabe como resolver isso? Voltar direto para uma page sem animar todo percurso de volta novamente? Obrigado.

[willcav]

Fala @Zeca-dev beleza? Veja se o App de exemplo abaixo responde sua pergunta:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Screen(pageIndex: 1),
    );
  }
}

class Screen extends StatelessWidget {
  final int pageIndex;
  const Screen({Key? key, required this.pageIndex}) : super(key: key);

  void goToNextScreen(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => Screen(
          pageIndex: pageIndex + 1,
        ),
      ),
    );
  }

  void goToFirstScreen(BuildContext context) {
    Navigator.popUntil(context, (route) => route.isFirst);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Tela: $pageIndex'),
            ElevatedButton(
              onPressed: () => goToNextScreen(context),
              child: const Text('Ir para próxima tela'),
            ),
            ElevatedButton(
              onPressed: () => goToFirstScreen(context),
              child: const Text('Voltar para primeira Tela'),
            ),
          ],
        ),
      ),
    );
  }
}

• Nesse App temos uma Widget que pode fazer o push de outras criando um pilha de telas através do método goToNextScreen
• Para voltar para a primeira tela da pilha, chamamos o método goToFirstScreen, que utiliza de um predicate para saber quando parar de dar o Navigator.pop. No caso desse exemplo, ele vai parar quando a tela atual for a primeira da pilha de telas (route.isFirst):

  void goToFirstScreen(BuildContext context) {
    Navigator.popUntil(context, (route) => route.isFirst);
  }

Você pode definir o predicate para a condição que você quiser, e caso esteja usando rotas nomeadas pode fazer algo assim, para voltar para a rota desejada:

 Navigator.popUntil(context, ModalRoute.withName('/home'));

[Zeca-dev]

Usando o popUntil todas as animações são os exibidas a cada pop e não quero exibi-las.

[eduardoflorence]

Olá @Zeca-dev,
Para fazer isto que deseja, você tem que utilizar o pushAndRemoveUntil. Veja um exemplo:

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (BuildContext context) => HomePage()),
  (Route<dynamic> route) => false
);

[Zeca-dev]

Usando pushAndRemoveUntil ele também volta, porém ele faz o empilhamento devido ao push, exibindo portanto a seta de voltar. Se eu estiver em uma rota de fullScreenDialog, que é o meu cenário, não funciona bem. O pushAndRemoveUntil ao de empilhar as telas, as que deveriam ser removidas continuam abaixo da pilha e ao clicar em voltar as telas são exibidas (vou refazer esse teste pois pode ser que eu tenha o feito errado).

Eu achei que pudesse resolver utilizando rotas aninhadas mas não resolvem bem também porquê a Appbar fica fixa e as rotas filhas mudam somente no body do scafold.

O que quero aplicar é o mesmo conceito que se usa no nativo. Abre-se uma activity e dentro dela se navega entre os fragments filhos usando o navigationGraph. Ao clicar no botão fechar em qualquer fragment é possível fechar o fluxo todo, usando a animação disposta na activity.

Isso deveria funcionar no fullScreenDialog, onde eu navegaria em rotas filhas lateralmente e ao fechar sairia com a animação definida no screenDialog, fechando o fluxo todo também.

[Zeca-dev]

Olá @Zeca-dev,

Para fazer isto que deseja, você tem que utilizar o pushAndRemoveUntil. Veja um exemplo:

Navigator.pushAndRemoveUntil(

  context,

  MaterialPageRoute(builder: (BuildContext context) => HomePage()),

  (Route<dynamic> route) => false

);

Vou refazer esse teste passando o parâmetro fullSreenDialog. Acho que deve funcionar. Só me resta verificar se as telas abaixo da navegação serão mesmo removidas.

Obrigado a todos pelas respostas.