Flutter -  Navegando para uma nova tela e retornando

Hoje veremos o conceito Navegação entre telas no Flutter.  https://flutter.dev/docs/cookbook/navigation/navigation-basics

O Flutter é um SDK de aplicativo móvel do Google que ajuda a criar aplicativos móveis modernos para iOS e Android usando uma única (quase) base de código.

Se você não conhece o Flutter veja o meu artigo :  Flutter - Primeiros contatos e impressões

Navegação no Flutter

A maioria dos aplicativos contém várias telas para exibir diferentes tipos de informações. Por exemplo, um aplicativo pode ter uma tela que exibe produtos,e , os usuários podem tocar na imagem de um produto para obter informações mais detalhadas em uma nova tela.

No Flutter, telas e páginas são chamadas de rotas, assim vou me referir a telas e páginas como rotas a partir daqui.

Dessa forma no Android, uma rota é equivalente a uma Activity ou atividade e no iOS, uma rota é equivalente a um ViewController.

No Flutter, uma rota é apenas um widget.

Então como fazemos no Flutter para navegar para uma nova rota ?

Usando a classe Navigator. Esta classe gerencia um conjunto de widgets filhos com uma disciplina de pilha.

Como primeiro contato com a navegação no Flutter vamos mostrar como navegar entre duas rotas.

Para isso vamos realizar as seguintes tarefas:

  1. Criar duas rotas
  2. Navegar até a segunda rota usando Navigator.push()
  3. Retornar para a primeira rota usando Navigator.pop

Vamos agora para prática...

Criando o projeto

No Visual Studio Code tecle CTRL+ SHIFT+P para abrir a paleta de comandos e a seguir selecione a opção : Fluter:New Project



A seguir informe o nome do projeto : flutter_navigation e tecle ENTER

Na janela de diálogo a seguir selecione a pasta onde o projeto vai ser salvo e clique em :
Select a folder to create the project in

O Flutter vai criar um projeto padrão onde todo o código da aplicação vai estar no arquivo main.dart dentro da pasta lib do projeto.

Nota:  Você também pode criar o projeto no prompt de comando digitando: flutter create <nome_projeto>

1- Criando duas rotas no Flutter

Vamos criar duas rotas (ou telas) para navegar, e, cada rota vai conter apenas um botão.

Ao tocar no botão na primeira rota vamos navegar para a segunda rota e ao tocar no botão da segunda rota vamos retornar para a primeira rota.

Simples assim...

Vamos abrir o arquivo main.dart da pasta lib do projeto e remover todo o código criado por padrão.

A seguir vamos definir o ponto de entrada da nossa app no método main() e importar o material.

Além disso vamos definir um título, um tema e definir a home como sendo a primeira rota:

import 'package:flutter/material.dart';
void main() {runApp(MaterialApp(
	title: 'Navegação Básica',
	 theme: ThemeData(
	   primarySwatch: Colors.blue
         ),
         home: PrimeiraRota(),
      )
    );
}

Agora temos que criar o widget PrimeiraRota() como um widget StatelessWidget.

No Visual Studio Code podemos a começar a digitar st , e, poderemos usar a opção do menu de atalho selecionando : Flutter stateless widget

Isso irá gerar o código padrão para criar o widget sem estado. Basta digitar a seguir o nome do widget: PrimeiraRota.

A seguir inclua o código abaixo:

class PrimeiraRota extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Primeira Rota'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Abrir rota(tela)'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SegundaRota()),
            );
          },
        ),
      ),
    );
  }
}

Para mudar para uma nova rota, use o método Navigator.push().

O método push() adiciona uma rota à pilha de rotas gerenciadas pelo Navegador.

De onde vem a rota ?

Aqui estamos usando a classe MaterialPageRoute que é uma rota modal que substitui a tela inteira por uma transição adaptável à plataforma. Essa classe é útil pois transita para a nova rota usando uma animação da plataforma.

No método build() do widget PrimeiraRota, usamos o callback onPressed() para navegar para a segunda rota.

Criando a segunda rota

Agora vamos criar outro widget chamado SegundaRota estendendo StatelessWidget que representa nossa segunda tela.

No Visual Studio Code podemos a começar a digitar st , e, poderemos usar a opção do menu de atalho selecionando : Flutter stateless widget

Isso irá gerar o código padrão para criar o widget sem estado. Basta digitar a seguir o nome do widget: SegundaRota.

A seguir inclua o código abaixo:

class SegundaRota extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Segunda Rota (tela)"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () { 
            Navigator.pop(context);
          },
          child: Text('Retornar !'),
        ),
      ),
    );
  }
}

E agora para fechar a segunda rota e retornar para a primeira rota usamos o método Navigator.pop().

O método pop() remove a rota atual da pilha de rotas gerenciadas pelo navegador.

Usamos esse método na chamada de onPressed() quando o usuário clicar no botão.

Agora é só alegria...

Para executar o projeto pressione F5 ou execute o comando flutter run -d all no terminal de comandos.

Abaixo vemo o projeto em execução:

Pegue o código do arquivo main.dart aqui : main_dart_navigation.zip

Ó Senhor, Senhor nosso, quão admirável é o teu nome em toda a terra, pois puseste a tua glória sobre os céus!
Salmos 8:1

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti