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