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

Playlist: Curso Grátis de FLUTTER e DART Completo https://www.youtube.com/playlist?list=PL5EmR7zuTn_aX0pG4oWTyKKQT25Hkq2XG 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