092 – FLUTTER PUSH e POP – Como Navegar Entre TELAS no FLUTTER – Curso de Flutter

Playlist: Curso Grátis de FLUTTER e DART Completo

6. Navegue para uma nova tela
Nesta etapa, você adicionará uma nova página (chamada de rota no Flutter) que exibe os favoritos. Você aprenderá a navegar entre a rota residencial e a nova rota.

Em Flutter, o Navegador gerencia uma pilha contendo as rotas do aplicativo. Empurrando uma rota para a pilha do Navegador, atualiza a exibição para essa rota. Popping uma rota da pilha do Navegador, retorna a exibição para a rota anterior.

Em seguida, você adicionará um ícone de lista ao AppBar no método de construção para RandomWordsState. Quando o usuário clica no ícone da lista, uma nova rota que contém os favoritos salvos é enviada para o Navegador, exibindo o ícone.

 Adicione o ícone e sua ação correspondente ao método de construção:

classe RandomWordsState estende estado MENOR RandomWords MAIOR
  …
  @sobrepor
  Construção de Widget (contexto BuildContext)
    Andaime de retorno (
      appBar: AppBar (
        title: Text (‘Gerador de nome de inicialização’),
        actions: MENOR Widget MAIOR [// Adiciona 3 linhas daqui …
          IconButton (ícone: Icon (Icons.list), onPressed: _pushSaved),
        ], // … para aqui.
      )
      body: _buildSuggestions (),
    );
  
  …

Dica: Algumas propriedades do widget usam um único widget (filho) e outras propriedades, como action, recebem uma matriz de widgets (filhos), conforme indicado pelos colchetes ([]).

Adicione uma função _pushSaved () à classe RandomWordsState.

  void _pushSaved ()
  
 Hot recarregue o aplicativo. O ícone de lista () aparece na barra de aplicativos. Tocar não faz nada ainda, porque a função _pushSaved está vazia.

Em seguida, você construirá uma rota e a empurrará para a pilha do Navegador. Esta ação altera a tela para exibir a nova rota. O conteúdo da nova página é construído na propriedade builder do MaterialPageRoute, em uma função anônima.

 Chame Navigator.push, como mostrado abaixo, que empurra a rota para a pilha do Navigator. O IDE irá reclamar sobre o código inválido, mas você irá corrigir isso na próxima seção.

void _pushSaved ()
  Navigator.of (contexto) .push (
  );

Em seguida, você adicionará o MaterialPageRoute e seu construtor. Por enquanto, adicione o código que gera as linhas ListTile. O método divideTiles () de ListTile adiciona espaçamento horizontal entre cada ListTile. A variável dividida contém as linhas finais, convertidas em uma lista pela função de conveniência, toList ().

Adicione o código, conforme mostrado abaixo:

void _pushSaved ()
  Navigator.of (contexto) .push (
    MaterialPageRoute MENOR void MAIOR (// Adicione 20 linhas daqui …
      construtor: (contexto BuildContext)
        final Iterable MENOR ListTile MAIOR tiles = _saved.map (
          (Par do WordPair)
            return ListTile (
              título: Texto (
                pair.asPascalCase,
                style: _biggerFont,
              )
            );
          
        );
        Lista final MENOR Widget MAIOR dividida = ListTile
          .divideTiles (
            contexto: contexto,
            telhas: telhas,
          )
          .listar();
      
    ), // … para aqui.
  );

A propriedade builder retorna um Scaffold, contendo a barra de aplicativos da nova rota, denominada “Sugestões Salvas”. O corpo da nova rota consiste em um ListView contendo as linhas ListTiles; cada linha é separada por um divisor.

 Adicione divisores horizontais, conforme mostrado abaixo:

void _pushSaved ()
  Navigator.of (contexto) .push (
    MaterialPageRoute MENOR void MAIOR (
      construtor: (contexto BuildContext)
        final Iterable MENOR ListTile MAIOR tiles = _saved.map (
          (Par do WordPair)
            return ListTile (
              título: Texto (
                pair.asPascalCase,
                style: _biggerFont,
              )
            );
          
        );
        Lista final MENOR Widget MAIOR dividida = ListTile
          .divideTiles (
            contexto: contexto,
            telhas: telhas,
          )
              .listar();

        retorno Andaime (// Adicione 6 linhas daqui …
          appBar: AppBar (
            título: Texto (‘Sugestões Salvas’),
          )
          corpo: ListView (filhos: divididos),
        ); // … para aqui.
      
    )
  );

 Hot recarregue o aplicativo. Favorito algumas das seleções e toque no ícone da lista na barra de aplicativos. A nova rota aparece contendo os favoritos. Observe que o Navegador adiciona um botão “Voltar” à barra de aplicativos. Você não teve que implementar explicitamente Navigator.pop. Toque no botão Voltar para retornar à rota residencial.

iOS – rota principal

iOS – rota de sugestões salvas