7.3. Navegação e roteamento em Flutter: Passagem de parâmetros entre telas

A navegação e o roteamento são componentes essenciais para a construção de aplicativos com múltiplas telas. O Flutter, com sua linguagem Dart, fornece uma maneira eficiente e eficaz de gerenciar a navegação e o roteamento em seus aplicativos. Vamos mergulhar profundamente no assunto e entender como a passagem de parâmetros entre telas pode ser realizada no Flutter.

No Flutter, a navegação e o roteamento são gerenciados por uma classe chamada Navigator. O Navigator funciona como uma pilha, onde cada rota (ou tela) é empilhada uma sobre a outra. Quando um usuário abre um aplicativo, a primeira tela que ele vê é chamada de rota inicial ou "home". A partir daí, cada nova tela que o usuário navega é empilhada em cima da rota inicial.

A passagem de parâmetros entre telas no Flutter é um processo simples e direto. Os parâmetros são passados como argumentos para a função Navigator.push(). A função push() aceita dois parâmetros: o contexto atual e a nova rota. A nova rota é uma instância de MaterialPageRoute, que por sua vez aceita um parâmetro builder. O parâmetro builder é uma função que retorna um novo widget, que é a nova tela para a qual o usuário será navegado.

Por exemplo, se quisermos passar um parâmetro "username" para uma nova tela, podemos fazer isso da seguinte maneira:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => NewScreen(username: 'John Doe'),
  ),
);

No exemplo acima, estamos passando o parâmetro "username" para a nova tela "NewScreen". O parâmetro é então acessado na nova tela usando a sintaxe widget.username.

Além de passar parâmetros para novas telas, o Flutter também permite que os dados sejam retornados da nova tela para a tela anterior. Isso é feito usando a função Navigator.pop(). A função pop() aceita dois parâmetros: o contexto atual e os dados a serem retornados.

Por exemplo, se quisermos retornar um valor "success" da nova tela para a tela anterior, podemos fazer isso da seguinte maneira:

Navigator.pop(context, 'success');

No exemplo acima, estamos retornando o valor "success" para a tela anterior. O valor retornado pode então ser acessado na tela anterior usando a função Navigator.push().

Por exemplo, podemos fazer algo como:

final result = await Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => NewScreen(username: 'John Doe'),
  ),
);

if (result == 'success') {
  // Do something
}

No exemplo acima, estamos esperando um valor de retorno da nova tela. Se o valor retornado for "success", então fazemos algo.

Em resumo, a navegação e o roteamento no Flutter são gerenciados pela classe Navigator, que funciona como uma pilha. A passagem de parâmetros entre telas é feita através das funções Navigator.push() e MaterialPageRoute(), enquanto a passagem de dados de volta para a tela anterior é feita através da função Navigator.pop().

Com essas ferramentas em mãos, você pode criar aplicativos Flutter complexos e avançados com várias telas e passagem de parâmetros entre elas. A navegação e o roteamento são fundamentais para a criação de aplicativos Flutter, e entender como eles funcionam é essencial para se tornar um desenvolvedor Flutter eficaz.

Próxima página do Ebook Gratuito:

89Navegação e roteamento em Flutter: Navegação com rotas nomeadas

3 minutos