Fala galera, beleza? Hoje vamos iniciar a construção de uma aplicação em Flutter, e como um exemplo clássico e muito útil para se aprender o básico de qualquer framework ou biblioteca, iremos construir uma todo list! Nessa sequência de tutoriais vamos entender melhor como um aplicativo Flutter é desenvolvido, sua sintaxe e estrutura, widgets, stateless e stateful widgets, modificar o estado, entre outras coisas bem legais como temas, animações, lidando com diferenças no hardware (android e iOS) e muito mais! Então fiquem ligados e bora codar!!
INTRODUÇÃO
Mas então o que é Flutter e por que escolher esta tecnologia? Para responder esta pergunta de uma forma mais dinâmica e com mais detalhes, vocês podem clicar aqui e ver um vídeo nosso sobre o assunto, mas de forma resumida, Flutter é uma SDK de código aberto da Google que utiliza a linguagem Dart para desenhar Widgets na tela e assim criar uma aplicação.
Obs: Antes de irmos para o próximo tópico, aconselho vocês irem instalando o Flutter em suas máquinas, são passos simples (algumas vezes nem tanto rs), e para configurar o editor vocês podem consultar aqui. Qualquer dúvida que tiverem, não somente da instalação, é só deixar nos comentários que será respondida o mais rápido possível! É isso, bora continuar a viagem!
WIDGETS
Mas afinal o que são esses widgets que não param de ser mencionados?? Bom, widgets são nada mais nada menos do que componentes que utilizamos para criar as aplicações, e se vocês já pesquisaram um pouco sobre Flutter, já devem ter ouvido ou lido em algum lugar esta frase (ou vão ler agora pela primeira vez): “Em Flutter, tudo é um widget”, pois bem, acredito que seja isto que diferencia os widgets de outros componentes que vocês já tenham visto por aí, pois literalmente tudo é widget, TUDO. “Padding?”, é um widget. “Cor?”, é um widget. “Alinhamento de layout??”, errr.., widget! “Não vai me dizer que até mesmo um texto é um widget???”, bom.., até gostaria mas.. é um widget!!! E se vocês querem saber, o aplicativo como um todo é um WIDGET.
O fato de tudo ser um widget, até mesmo propriedades de layout e outras propriedades, é uma das coisas que faz muita gente que veio de outras tecnologias estranhar o Flutter, mas o que posso dizer sobre é que estranhar algo novo ou diferente é inevitável, ainda mais quando estamos acostumados com outra forma de lidar com propriedades de layout, por exemplo. É uma questão de tempo, adaptação e tentativa. Mas não parem o tutorial por aqui, temos muito o que ver ainda!
MÃOS AO TECLADO!
Tenho dois recados para dar para os que chegaram até aqui: primeiro, se vocês não instalaram o Flutter em suas máquinas ainda como foi sugerido acima, não se preocupem, não irão precisar subir todo o texto para instalarem, basta acessar aqui https://flutter.dev/docs/get-started/install, e segundo, meus parabénsss, se ainda não estão entediados quer dizer que querem aprender algo realmente! E sem mais delongas, mãos ao teclado!
Primeiramente digitem o seguinte comando no local onde desejam criar o projeto:
flutter create nome_do_projetoDica: Se vocês pretendem subir o projeto no Github com o mesmo nome de diretório recomendo utilizarem o formato de nomeação conforme mostrado acima, com _ (underlines), pois é o único formato de separador que o Github aceita (até onde eu sei, posso estar enganado ou pode acabar mudando se você estiver muito no futuro).
Vou utilizar amazing_todo_list como nome do projeto, vocês utilizem o que a criatividade gritar ou o mesmo nome, sem problema nenhum.
Ao rodar o comando, vocês vão ver que várias pastas e arquivos foram sendo criados e depois apareceu uma mensagem similar a esta:
Se apareceu uma mensagem parecida com a imagem acima quer dizer que foi criado com sucesso, senão a própria SDK vai apontar o que está errado, então não se preocupem, e qualquer dúvida só mandar nos comentários.
ESTRUTURA DE PASTAS
Agora só abrir o projeto no editor preferido e bora analisar!
Vocês vão ter uma estrutura de pastas parecida com a mostrada acima, e por hora o que é importante sabermos é:
- Pastas android, ios e web vão conter todas as informações e código nativo de cada plataforma necessários para que a aplicação rode corretamente nas respectivas plataformas.
- Pasta lib contém os widgets, regra de negócios, telas, e qualquer outro tipo de componente que formos utilizar.
- arquivo pubspec.yaml é o arquivo que colocamos novas dependências no projeto e verificamos quais estão sendo utilizadas.
Os demais arquivos e pastas não são importantes no momento.
E agora, finalmente, vamos rodar!
PROGRAMADORES, VAMOS RODAR!
Para iniciar a aplicação digitem o seguinte comando no terminal dentro da pasta do projeto:
flutter runSe tiverem utilizando mais de um dispositivo no computador e queiram escolher em qual deve ser instalado a aplicação, digitem o seguinte comando para listar os dispositivos:
flutter devicesIrá aparecer os dispositivos habilitados para rodar o aplicativo como mostrado abaixo:
Para selecionar um dispositivo em específico digite o comando:
flutter run -d nome-do-dispositivo || id-do-dispositivoIrei utilizar o primeiro dispositivo, então poderia digitar tanto o nome do dispositivo (SM G531BT) quanto o id do dispositivo (4b137c79632a724e), como mostrado a seguir:
DicaEz: Não é necessário digitar o nome ou o id completamente, basta digitar até ser a única identificação do dispositivo, então, em vez de SM G531BT, utilizei SM:
flutter run -d SMSe tiver dado tudo certo vocês verão uma mensagem similar a esta:
Como está escrito acima, para recarregar as mudanças é necessário pressionar a tecla “r” no terminal e para reconstruir o estado da aplicação é preciso pressionar a tecla “R” (maiúsculo) no terminal também.
Este é o modo tradicional de rodar uma aplicação em Flutter, porém, dependendo do seu editor, você pode rodar diretamente por ele! No VSCode por exemplo, basta apertar F5, Escolher Dart & Flutter, e pronto! A vantagem em rodar no próprio editor é que ao salvar algum arquivo do projeto, o editor verifica se houve modificação e lança as modificações na aplicação sem precisar apertar a tecla “r” no terminal!!
Independentemente do método que vocês utilizarem para rodar a aplicação, a primeira tela que verão provavelmente será similar a esta:
TO BE CONTINUED…
Sei que estão animados para continuar com a aprendizagem, mas por hora iremos parar por aqui para não ficar muito extenso e cansativo. Espero que tenham gostado e principalmente aprendido mais sobre Flutter, como funciona, e um pouco da estrutura e widgets! Não se preocupem, iremos fazer uma série com muito conteúdo daora e que com certeza irá agregar algo bom para vocês!