Introdução ao Flutter

Isac — Wed, 11 Sep 2019 16:01:22 +0000

Atualmente trabalho com desenvolvimento focado em plataforma web utilizando React, mas também já tive experiência profissional trabalhando com desenvolvimento cross-platform com React Native.

Recentemente eu venho em momentos livres estudando um pouco sobre Flutter e alguns amigos estão mencionando que sou vira folha. 😁

Acredito que devemos sempre nos atentar a novas tecnologias para que caso necessário, tenhamos embasamento para discutir e caso necessário, tomar a decisão de qual a melhor ferramenta a ser utilizada em determinado contexto.

Como surgiu o Flutter?

Ao ser perguntando como o Flutter surgiu, Eric Seidel relatou que o time do Chrome havia iniciado um experimento, onde estavam removendo alguns pedaços antigos para compatibilidade na web em busca de performance. Ao fim do experimento, eles realizaram um benchmark e tiveram a surpresa de que o experimento era vinte vezes mais rápido. Então pensaram, temos algo aqui.

O que é o Flutter?

É um SDK criado pela Google que teve o seu lançamento em 2017. O Flutter tem o intuito de ser uma tecnologia não somente cross-platform para mobile, mas que seja utilizada em todas as telas.

Mobile(iOS/Android)
Web (Flutter 1.9)
Desktop
Embarcados

Qual a linguagem utilizada no Flutter?

Flutter utilizada Dart como linguagem, também criada pela Google em 2011, Dart veio com o intuito de substituir o Javascript e se tornar a linguagem padrão no mundo dos browsers. 😁

Mas porque a Google escolheu Dart como a linguagem padrão para desenvolvimento no Flutter? Eles até tentaram utilizar Javascript como linguagem, mas não foi bem sucedida. Eu vou expor alguns pontos com relação a isto, entre estes pontos, alguns são achismo e outros já possuem embasamentos técnicos.

Dart é do Google: Isso força a escolha da linguagem. Outro ponto é que, caso realmente o Flutter se torna a principal ferramenta para desenvolvimento mobile do sistema operacional Fuchshia, o Google não cometeria o mesmo erro de escolher uma linguagem terceira para a principal plataforma mobile deles.
JIT e AOT: Dart suporta as duas forma de compilação e este é uma das grandes maravilhas que a linguagem nos proporciona. A JIT(Just in Time) nos possibilidade ter um hot reaload fantástico e que traz uma experiência de desenvolvimento incrível. Já o AOT(Ahead of Time) nos da a possibilidade de lidarmos diretamente com as plataformas nativas, se comunicando com as arquiteturas ARM e x64.

Pense declarativo

Flutter tenta trazer uma interoperabilidade para diversas plataformas e linguagens de desenvolvimento.

Não trazendo uma linguagem de marcação como JSX presente no React ele proporciona uma maior familiaridade aos desenvolvedores nativos(iOS/Android). Trazendo a forma declarativa, isso torna a adptação dos desenvolvedores React/Native ainda mais fácil.

Programação declarativa é como descrever uma imagem, é a forma como os usuários irão visualizar a sua aplicação. Isso nos da diversos benefícios, tornando o código escrito como o real estado da aplicação.

Legível: É muito intuitivo você compreender um código quando ele é escrito de forma declarativa.
Previsível: Da mesma forma como temos a legibilidade, também temos a facilidade de prever os efeitos da aplicação.

O que ele propõe?

Não somente a possibilidade de termos nossa única code base em todas as telas, algo incrível que eu e vocês podemos perceber é que a experiência e curva de aprendizado do Flutter são extremamente magníficas. Como mencionamos acima, ele traz a interoperabilidade através da forma como se escrever e até mesmo em nomes de métodos que já estamos acostumados.

Flutter também possui em sua essência todo o ferramental necessário para que você construa uma aplicação de qualidade sem a necessidade de uma grande variedade de bibliotecas.

Alguns pontos que o Flutter nos proporciona:

Desenvolvimento rápido e fácil
Confiança em o que os seus usuários irão visualizar
Faça features com maestria
Temos o controle de cada pixel e cada gesto
Criar um produto com apenas uma code base
Nunca diga não ao seu designer

Widgets

Você já deve ter escutado isso em algum lugar: Tudo em Flutter é Widget.

Baseado nos componentes do React, Widgets são pequenos elementos que irão integrar toda a sua árvore de Widgets, os elementos em conjunto então irão formar e representar o estado de toda a sua aplicação.

Aqui também possuímos dois Widgets essenciais para o desenvolvimento com Flutter, StatelessWidget e StatefulWidget. Os nomes já sugerem o que cada um faz e iremos mostrar aqui um pequeno exemplo de cada um deles.

StatelessWidget: Um widget que não possui estado.

Também existe a possibilidade de que ele receba as informações e se torne ainda mais fácil de ser reutilizável.

StatefulWidget: Diferente do widget anterior, neste caso podemos manter e manipular um determinado estado. O mesmo será responsável por realizar a mutação deste estado e realizar um rebuild caso o estado sofra alterações.

Comunidade

Caso você seja um entusiasta e realmente queira que o Flutter deslanche ainda mais isto depende de você/nós. Precisamos que a comunide se engage criando conteúdos, solucionando problemas e expondo a forma como eles foram solucionados.

Caso você empresa/startup esteja utilizando Flutter, faça como o Nubank, anunciaram recentemente que eles irão utilizar Flutter para desenvolvimento de seus produtos e isso deu um grande avanço na comunidade Flutter do Brasil.

A comunidade é a chave essencial e crucial para a maturidade e permanência de uma determinada tecnologia no mercado.

Forem: Isac