Roteamento simples com Flutter
Hello My Brothers, depois de mofar por muito tempo procurando pela internet como fazer um roteamento simples com flutter, eu finalmente consegui fazer um roteamento usando Named Routes, maaas, sem ser aquela da documentação oficial.
Eu usei a mesma linha de raciocínio do roteamento com NodeJS, o repositório do cara que eu sigo como base é esse aqui.
Então vamos lá…
O primeiro passo é instalar o Flutter no seu pc, se você ainda não o instalou, é só seguir esse tutorial
Agora, após a instalação, vamos ao tutorial:
Inicie o projeto flutter com o nome que você quiser, em seguida, entre no arquivo main.dart que é o index de nossa aplicação e é quem chama todo mundo. Ele vai estar com um código gigante que é o código da aplicação inicial e padrão do Flutter. Apague tudo e faça o seguinte:
Isso mesmo!!! Apenas 5 linhas, acontece que tudo o que o main.dart vai fazer agora é chamar a classe Routes do arquivo router, que é o nosso roteador. Crie então o arquivo Router.dart ao lado do arquivo main e nele insira um código parecido com o seguinte:
O que acontece nesse arquivo é algo muito simples, estamos primeiro importando o material do flutter (padrão).
Em seguida importamos as telas que o nosso app terá, elas estão em arquivos diferentes e é aqui que o nosso tutorial se difere do tutorial oficial da documentação.
Agora criamos a classe Routescom uma variável chamada routesque é meio que composta, com um tipo String que referencia a um construtor de widgets, é com isso que renderizamos as nossas telas. Observe que atribuí a classe Cadastro()que está no arquivo cad.dart a rota "/cadastro" , nesse caso, sempre que o Navigator.pushNamed chamar a rota /cadastro o que será mostrado na tela será a nossa tela de cadastro.
Em seguida chamamos a classe Routes e definimos que ela vai rodar o MaterialApp com um título, um tema, passando para o atributo home a classe Dashboard() que eu importei do arquivo list.dart e para o atributo routes eu passei a variável routes que eu expliquei no parágrafo anterior.
Aqui cabe uma explicação: Veja que eu não criei nenhuma rota para chamar o Dashboard, porquê essa classe, como é a inicial, não precisa ser referenciada, entretanto, caso você precise voltar para ela em algum momento na execução do app, será legal se você a instanciar lá na variável routes também.
Agora precisamos criar esse arquivo chamado cad.dart. Para fins de organização do código o criarei no diretório /screens ao lado do arquivo main no diretório /lib , abaixo vou mostrar um print da minha estrutura:
Então, depois de criar o diretório e o arquivo cad.dart e dentro dele a classe Cadastro() , precisamos chamar essa classe. Lembram do arquivo list.dart? Que tem a classe Dashboard() , pois é, é lá que vamos fazer a chamada do cad.dart, veja isso na próxima seção…
Com todo o código pronto, agora precisamos chamar a screen de cadastro, para isso, vamos criar o arquivo list.dart que vai conter a classe Dashboard() e em algum lugar desse código vamos chamar a classe Cadastro(), no meu caso eu criei um floatingActionButton com o ícone de + para simbolizar que clicando naquele botão nós seremos levados para uma tela de adição. Veja o código:
Aqui a chamada é muito simples, veja que criei o botão, em seguida chamei a função onPressed: (){} que usa o Navigator.pushNamed(context, ‘/cadastro’); para dizer para qual rota que eu estou querendo direcionar.
Enfim, é isso.
Caso tenha ficado alguma dúvida pode deixar nos comentários…
jeffdeveloper.tech
