Introdução ao Flutter
Tags: flutter, reactnative
Published: 2019-09-11 16:01:22

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](https://flutter.dev/assets/development/data-and-backend/state-mgmt/ui-equals-function-of-state-54b01b000694caf9da439bd3f774ef22b00e92a62d3b2ade4f2e95c8555b8ca7.png)


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.

{% gist https://gist.github.com/isacjunior/ba169c9cc4373520225fd2044f16e14b.js %}

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

{% gist 
https://gist.github.com/isacjunior/c5865c0649432ac7b119b845c71f7a39.js %}

* **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.


{% gist 
https://gist.github.com/isacjunior/c507e1e1ebb1e901bedc4271b5973588.js %}


### 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.