DEV Community 👩‍💻👨‍💻

Cover image for Introdução ao Flutter
Isac
Isac

Posted on

Introdução ao Flutter

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

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.

Top comments (0)

Become a Moderator Can you help us make DEV a better place?

Fill out this survey and help us by becoming a tag moderator here at DEV.