Flutter — Hey Flutter, Diz Olá Mundo

Após termos visto alguns conceitos sobre o Fluter, conhecendo assim o Flutter é agora momento de verificar se o Flutter é ou não o amigo que precisamos. Vamos neste artigo ver mais sobre o Flutter, analisando as maravilhas do SDK e fazendo um test-drive!

Lembrar que o menu desta série é:

1. Conhecendo o Flutter;
2. Hey Flutter, Diz Olá Mundo (este artigo) e
3. Flutter Widgets.

Instalando o Flutter SDK

Supondo que já se tem o Android Studio ou Xcode instalado em sua máquina irei aqui apresentar os passos de instalação do Flutter SDK (no Android Studio) e iremos fazer o nosso Test Drive ao Flutter!

Pode encontrar o Flutter SDK e as instruções a partir deste link.

Ao instalar do Flutter SDK ele irá permitir usar alguns “flutter commands” na linha de comando (fantástico, certo!!??), estes ajudam a detectar erros, verificar o estado do SDK como actualizações, dispositivos conectados, componentes instalados e em falta entre outras funcionalidades. E irá inclusive ajudar-nos a verificar se a instalação do SDK está concluída.

O resultado pretendido é este no final:

Android Studio Terminal [flutter doctor command]

Caso não tenhamos este resultado logo a prior, não é motivo para alarido, há sempre situações inesperadas e vamos resolver!

https://gfycat.com/gifs/search/programming

Algumas dicas para que não seja uma daquelas instalações chatas e acabarmos por desistir antes mesmo de iniciar a jornada e que consigamos instalar perfeitamente o SDK:

• Para fácil gestão de ficheiros guarde o Flutter SDK (o ficheiro) no mesmo directório que o Android Studio SDK;
• Verifique se o flutter tem tudo funcional:

flutter doctor

Caso não esteja, corra o comando de configuração do Flutter SDK:

flutter config --android-sdk /caminho/do/android/sdk

• Certifique que as variáveis de ambiente foram devidamente instanciadas:

ANDROID_HOME=/caminho/para/a/pasta/do/sdk

Flutter SDK features (tools)

É importante saber com o que estamos a lidar e após conhecer e ter ele em mãos nada mais que inspecionar antes do Test Drive, afinal de contas queremos ter uma super experiência com o Flutter.

O objectivo de Flutter é permitir que desenvolvedores possam ter aplicações totalmente funcionais em ambas plataformas como descrevi no inicio da série. Considerando isso o Flutter possui algumas ferramentas que permitem ao desenvolvedor ter uma experiência completa desde a facilidade e comodidade no momento de produção e testes até ao debugging.

Irei aqui abordar algumas das ferramentas que permitem esta facilidade:

1. Flutter commands

O Flutter SDK permite ao desenvolvedor controlar, verificar e fazer debugging usando comandos, com destaque ao flutter doctor e flutter run que permite verificar o estado do SDK e correr a aplicação em debug mode respectivamente.

Ajudam muito para desenvolvedores que lidam bastante com comandos no seu dia-a-dia e são bastantes práticos.

2. Hot-reload/Hot-restart

No artigo anterior foi dito que o Flutter compila directo no ARM. Pois, isso significa que diferente de outros frameworks Cross-Platform Native ou Hybrid que precisam de um certo nível de permissões pelo facto de correr em ambiente “virtual” (virtual machine) como acontece com aplicações Java.

O Flutter leva esta característica até o desenvolvedor em forma de dois recursos bastante interessantes que são o hot-reload e o hot-restart que têm basicamente a mesma função sendo que o hot-restart permite que correndo a aplicação em modo de debug possamos modificar o código e fazer uma nova compilação sem precisar invocar novamente as dependências, e outros ficheiros de instalação/debugging e o hot-reload permite recompilar o código mexendo apenas o código que foi modificado mantendo o estado actual da aplicação.

3. Widget Inspector

O widget inspector é uma ferramenta que funciona como inspector das páginas web, ou seja, permite inspecionar e saber por exemplo quanto espaço o widget ocupa e caso ele não esteja visível onde está posicionando de entre várias outras aplicações.

Olá Flutter

Finalmente podemos começar o Test Drive!!

Ok, é nosso primeiro contacto com o Flutter SDK mas deixa adiantar que não será diferente de criar uma aplicação Android.

Irei passar a seguir os passos para criação da primeira aplicação usando Flutter, começando por abrir o Android Studio ou XCode (estou usando o Android Studio):

1. Criar um projecto Flutter

2. Selecionar em “Criar uma Aplicação Flutter”

Com o Flutter nós podemos criar nosso widgets e plugins, mas pra hoje vamos só criar uma aplicação.

3. Configurar a aplicação

Bom, é importante notar que para uma primeira aplicação o campo do caminho para o SDK pode não estar preenchido, portanto é necessário apontar o directório do Flutter SDK.

4. Vamos Codificar

https://gfycat.com/gifs/search/programming

Apenas um trecho de código é o bastante para ter uma tela “Olá Mundo” com visuais aceitáveis. Não foi necessário nenhum layout resources ou definir atributos como cor em ficheiros externo, e poderá correr em iOS e Android!

Pode baixar o projecto aqui.

Este foi o segundo artigo da série;

Obrigado por acompanhar até ao fim e espero por você no próximo artigo.

Para questões e sugestões esteja a vontade para tal nos comentários, email igorlsambo1999@gmail.com ou twitter @lsambo02.

Obrigado e até ao próximo artigo!!!