7.2. Navegação e roteamento em Flutter: Navegação entre telas

Página 87

Navegação e roteamento são elementos cruciais em qualquer aplicativo. No Flutter, eles desempenham um papel vital para fornecer uma experiência de usuário ideal. Este artigo discute a navegação e o roteamento em Flutter, focando na navegação entre telas. Vamos começar com uma compreensão básica.

No Flutter, tudo é um widget. Portanto, cada 'tela' em seu aplicativo é apenas um widget. A navegação entre esses widgets (ou telas) é realizada usando uma pilha, semelhante ao padrão de pilha em estruturas de dados. Cada vez que um novo widget é aberto, ele é empurrado para esta pilha. E quando o usuário termina de interagir com um widget e volta, o widget é retirado da pilha. Este é o conceito básico de navegação em Flutter.

Para navegar para uma nova tela, você precisa usar o método 'Navigator.push' fornecido pelo Flutter. Este método leva dois argumentos: o contexto atual e a rota para a nova tela. A rota é geralmente criada usando o método 'MaterialPageRoute', que leva um argumento do construtor - o widget que você deseja abrir.

Por exemplo:

Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
);

O código acima abre um novo widget chamado 'SecondScreen'. O 'context' aqui é o contexto atual do widget. É passado para 'MaterialPageRoute' para que ele saiba onde colocar o novo widget na árvore de widgets.

Para voltar para a tela anterior, você pode usar o método 'Navigator.pop'. Este método remove o widget atual da pilha e volta para o widget anterior. Você pode usar este método quando o usuário termina de interagir com o widget atual. Por exemplo, você pode chamar 'Navigator.pop' quando o usuário pressiona um botão de voltar.

Além disso, o Flutter também oferece uma maneira de passar dados entre widgets durante a navegação. Você pode passar os dados como um argumento para o construtor do widget que você está abrindo. Por exemplo:

Navigator.push(
    context,
    MaterialPageRoute(
        builder: (context) => SecondScreen(data: 'Hello, World!'),
    ),
);

O código acima passa uma string 'Hello, World!' para 'SecondScreen'. Em 'SecondScreen', você pode acessar esses dados através do argumento do construtor.

Além da navegação básica, o Flutter também suporta roteamento nomeado. Em roteamento nomeado, você define uma tabela de rotas com nomes de rota e seus respectivos widgets. Você pode então navegar para um widget usando seu nome de rota. Isso é útil quando você tem muitas telas em seu aplicativo e a navegação se torna complexa.

Por exemplo, você pode definir uma tabela de rotas como esta:

final routes = {
    '/': (context) => HomeScreen(),
    '/second': (context) => SecondScreen(),
};

Em seguida, você pode navegar para 'SecondScreen' usando seu nome de rota:

Navigator.pushNamed(context, '/second');

Em resumo, a navegação e o roteamento em Flutter são simples, mas poderosos. Eles permitem que você gerencie a navegação entre telas de uma maneira eficiente e organizada. Além disso, eles oferecem a flexibilidade de passar dados entre telas e usar roteamento nomeado para lidar com a complexidade da navegação.

Ao criar aplicativos com Flutter, é importante entender a navegação e o roteamento para fornecer uma experiência de usuário suave e intuitiva. Portanto, certifique-se de dedicar algum tempo para aprender e experimentar com esses conceitos.

Próxima página do Ebook Gratuito:

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