Flutter o que é
Share on facebook
Share on twitter
Share on linkedin

Flutter: Introdução aos conceitos básicos

O que é, e para o que serve o Flutter?

Flutter basicamente é um framework da Google para, inicialmente, desenvolvimento de aplicativos para celulares iOS e Android, que tem sido muito utilizado nos últimos anos.

Atualmente é possível utilizar o Flutter para o desenvolvimento não apenas de aplicativos de celular, mas também de aplicações para a Web, e para sistemas operacionais (Windows, Linux e MacOS).

Framework → Ferramenta que tem o objetivo de facilitar o desenvolvimento, oferecendo uma base de recursos e bibliotecas que otimiza tempo e custos. Com a utilização de frameworks a equipe de engenharia gasta menos tempo com configurações genéricas e pode focar mais em problemas específicos daquela aplicação!

Portanto, hoje podemos dizer que o Flutter é uma ferramenta para o desenvolvimento aplicações nativas multiplataforma, utilizando uma mesma base de código.

Dart

Agora que já temos definido que Flutter é um framework para desenvolvimento de aplicações multiplataforma, e que framework é uma ferramenta que tem o objetivo de facilitar o desenvolvimento, vamos entender como é a linguagem que está por trás.

Dart é uma linguagem de programação que está na sua versão 2.14, focada em proporcionar um experiência produtiva e multiplataforma para os desenvolvedores, é orientada a objetos, fortemente tipada, com null safety (valores nulos permitidos apenas se explicitamente indicados, o que previne o famoso null pointer exception), suporte para chamadas assíncronas, arrow function, streams, e muitas outras funcionalidades.

Dart é uma linguagem com suporte a diversas bibliotecas nativas que facilitam muito o desenvolvimento. Como exemplo temos dart:collection para trabalhar com coleções de dados, dart:convert que permite manipular com facilidade objetos JSON, funções mantematicas com dart:math, manipulação de entradas e saidas com aqruivos, sockets e http utilizando o dart:io, e muitas outras.

Em relação a compilação, temos dois tipos, plataformas nativas como celulares de desktops, e plataformas web. Para dispositivos nativos o Dart inclui a Dart VM, com compilação Just-In-Time (JIT) que permite o querido hot-reload e acompanhamento de métricas em tempo de execução (DevTools), e um ahead-of-time (AOT) para a produção de código de máquina otimizado para a plataforma ARM ou x64.

Já em plataformas web, o Dart é transcrito em JavaScript utilizando o dartdevc para ambientes de desenvolvimento, e dart2js para ambiente de produção.

Flutter

Imagem da documentação do Dart, acessado em 15/09/2021 pelo endereço https://dart.dev/overview

Um ponto importante a ser destacado na compilação para a WEB é que o código gerado não é otimizado para SEO (Search Engine Optimization), portanto se o objetivo é construir uma página que seja encontrada pelas ferramentas de busca (Google, Bing e etc..), não é indicado utilizar essa ferramenta!

Como funciona o Flutter?

O Flutter é um framework focado na construção de UI, como a propria Google define é um toolkit para a construção de interfaces bonitas, e para essa construção é utilizado vários tipos de Widgets que funcionam como blocos que são posicionados na tela. Cada Widget tem um funcionamento específico e pode ser combinado com outros Widgets, como montar peças de lego.

De acordo com que os Widgets são utilizados para construção da interface é construída uma árvore de Widgets. Por exemplo, para uma tela utilizamos um Widget base chamado Scaffold, e dentro dele podemos posicionar Widgets de texto, ícones e imagens utilizando outros Widgets como Column, Row, e Container.

Na imagem abaixo podemos ver a raiz da árvore com o Widget Scaffold (em roxo), e como filhos dele temos uma AppBar e um Container. Como filho do Container temos um Widget para posicionamento de texto e outro para posicionamento de outros Widgets em linha (Row). Como filhos da Row temos um Widget para texto e outro para ícone.

Flutter

Fonte: https://blog.geekhunter.com.br/introducao-ao-flutter-o-framework-do-google/#Ok_Mas_como_funciona Acessado em: 15/09/2021

A documentação do Flutter é conhecida por ser muito boa, no canal do Youtuber tem uma playlist com mais de 100 videos rápidos explicando o funcionamento dos principais principais Widgets utilizados.

  • Container: utilizado para agrupar um Widget. É possível definir propriedades como cor e tamanho;
  • Column: utilizado para agrupar Widgets em coluna. Ele recebe uma lista de filhos (Widgets), ao invés de um único filho;
  • Row: utilizado para agrupar Widgets em linha. Ele recebe uma lista de filhos(Widgets), ao invés de um único;
  • ElevatedButton: utilizado como botão. Ele tem um atributo “onPressed“, que executa uma função quando pressionado, é um child como um widget filho (como text para fazer um botão com texto no centro);
  • ListView: utilizado para criar listas e scroll na tela. Recebe uma lista de filhos(Widgets), ao invés de um único filho;
  • FutureBuilder: utilizado para renderizar a tela de acordo com um certo estado. Usamos ele para gerenciar uma chama assíncrona, mostrando uma tela de loading enquanto não for completado, e quando a API retornar mostrar os dados;

Como iniciar no Flutter?

Para aprender Flutter é necessário conhecimento em lógica de programação e entender sobre o paradigma de programação Orientada a Objetos. Para iniciar o desenvolvimento, primeiramente é necessário realizar a instalação. Como foi dito anteriormente, a documentação do Flutter é muito completa, portando, recomendo seguir os passos da própria documentação por esse link.

Para evoluir o conhecimento na ferramenta vou recomendar novamente a documentação, mas a comunidade Flutter no Brasil é muito forte e temos muitos conteúdo que são excelentes. Segue alguns links:

Tem interesse em fazer parte de um time que fomenta o aprendizado constante e te dá a chance de atuar diretamente com o Flutter? Então acesse nossa página de carreiras, escolha a vaga que mais se encaixa no seu perfil e venha ser dti!


Fontes

Preencha seus dados para receber nossa newsletter!

Ficou com dúvidas?

contato@dtidigital.com.br
R. Antônio de Albuquerque, 330 – 14° andar
Savassi, Belo Horizonte – MG, 30112-010

Cuidado

Nós utilizamos cookies e outras tecnologias semelhantes para analisar sua experiência no site e personalizar conteúdos e anúncios durante sua navegação. Ao navegar pelo site, você autoriza a DTI Digital a realizar tal monitoramento. Conheça nossa Política de Privacidade.

You will be redirected to spotify