Fala, pessoal. Tudo bem? Hoje eu vou falar um pouco sobre a navegação entre telas no Flutter.
O assunto pode parecer complicado de inicio, eu sei que sair de codificar todo o seu app em uma só tela, para dividir e modular pastas criando diferentes layouts e padrões de divisão de projeto pode assustar um pouco, mas calma. Hoje, eu estou aqui para te ajudar a dar o pontapé inicial nos seus estudos.
Iniciando o app
Bom, primeiramente, vamos criar nosso projeto no Flutter.
Então, clique no menu Iniciar, digite “prompt de comando” – se estiver no Mac digite “Terminal” -, vá até a pasta onde você quer criar seu projeto, e digite o comando “flutter create NOME DO APP”.
Ah, uma dica: no lugar de NOME DO APP coloque o nome que você deseja dar para o projeto.
Nós daremos o nome de NAVEGACAO, então, no nosso caso, o comando ficará “flutter create navegacao”.
Pronto, agora é só abrir seu projeto no VSCode. Contudo, se você já tiver configurado e instalado o VSCode corretamente, navegue até a pasta do projeto no terminal e digite “code .”, esse comando abrirá seu projeto no VSCode.
Assim, podemos ver a tela inicial do projeto da seguinte forma:
Implementação do código para navegação
Agora que já temos o projeto criado, podemos começar.
Antes de mais nada, você pode apagar a pasta test, não usaremos ela hoje.
Em seguida, vá ate o arquivo “main.dart” e apague seu código, deixando-o no seguinte formato:
Outra dica: copiem o código abaixo, ele é igual ao do exemplo e ajudará vocês nos estudos.
import 'package:flutter/material.dart';
import 'package:navegacao/telainicial.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({ Key? key }) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Tela Inicial')),
body: Container(alignment: Alignment.center,
child: Column(mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
"Bem vindo a tela inicial do APP",
style: TextStyle(fontSize: 20,),
),
IconButton(onPressed: (){},
icon: const Icon(Icons.arrow_forward_sharp))
],
),
),
);
}
}Depois, teremos o seguinte resultado na tela do seu App:
Agora, precisamos criar um novo arquivo para navegarmos, e para isso, é só criar um arquivo chamado “telainicial.dart” na pasta “lib”.
Entre no arquivo que acabou de criar e digite o seguinte código:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class TelaInicial extends StatelessWidget {
const TelaInicial({ Key? key }) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container( alignment: Alignment.center,
child: Column(mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Bem vindo a segunda tela do seu app', style: TextStyle(fontSize: 20,),)
],
)
),
);
}
}Import
Agora, para usarmos a navegação, temos que importar as telas que serão usadas.
Normalmente, quando usamos o Navigator, esse import é feito automaticamente. No entanto, caso não aconteça automaticamente, você pode fazer de forma manual.
Então, vá na tela principal de navegação e importe a tela que você acabou de criar. Para isso, escreva o seguinte comando import “‘package:navegacao/telainicial.dart’;”.
Ah, e lembrem-se que esse caminho serve para o nosso exemplo, então, caso seu projeto seja diferente, coloque o caminho certo após a “/”.
Usando o Navigator para navegar entre as rotas
Agora temos toda a estrutura necessária para finalmente navegar entre as rotas do Flutter. E para isso, vamos usar o “Navigator” para mudar nossas rotas.
Na linha 43, temos um IconButton que requer um ícone e uma função onPressed. O ícone já está feito, no entanto, nós queremos que o usuário seja direcionado para outra tela quando clicar no ícone.
Dentro das chaves, nós colocaremos o seguinte comando:
Navigator.push(context,
MaterialPageRoute(
builder: ((context) => const TelaInicial())
)
);Aqui você pode ver que estamos usando o “.push”. Ele é o que usamos para ir para a próxima rota.
Posteriormente, usaremos outros parâmetros para outras funcionalidades.
A estrutura usada requer 2 parâmetros, o “context” e o “MaterialPageRoute”. Eles, basicamente, farão a substituição da nossa tela inteira por outra por meio de uma transição.
O MaterialPageRoute também possui uma estrutura dentro dele, o builder, que é, portanto, onde você colocará sua rota.
No Flutter, rotas podem ser Widget, portanto, simplesmente chamaremos o Widget genérico denominado “TelaInicial()”, que foi o nome que demos a nosso widget no segundo arquivo criado(telainicial.dart).
Então, assim que você aperta na seta, ela te levará para essa página:
Navigator.pop()
Mas para alguns pode restar a duvida: como eu volto para a tela anterior? É simples. Nesse contexto, podemos usar o Navigator.pop(), pois ele faz com que você volte para a tela anterior passando somente um parâmetro.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class TelaInicial extends StatelessWidget {
const TelaInicial({ Key? key }) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container( alignment: Alignment.center,
child: Column(mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Bem vindo a segunda tela do seu app', style: TextStyle(fontSize: 20,),),
IconButton(onPressed: (){Navigator.pop(context);}, icon: const Icon(Icons.arrow_back),)
],
)
),
);
}
}
Aqui, vemos que agora foi criado um IconButton, que tem um icone e um onPressed. Então, nessa mesma função, temos entre chaves o nosso Navigator.pop(context). E para voltar para a tela anterior, é só passar o context.
Agora me diz, o Flutter é ou não é bacana?
E, assim, voltamos a tela anterior e terminamos nosso objetivo.
Conclusão
Parabéns, você criou uma rota no seu app! Rotas são extremamente necessárias para quando você for trabalhar em projeto maiores, então, eu aconselho que você siga estudando sobre elas e tente se aprofundar cada vez mais, afinal todo conhecimento é valido.
Espero que tenha ficado claro e vocês tenham gostado. Abraço e até a próxima!
