Flutter: Introdução aos conceitos básicos

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

Flutter basicamente é um framework muito popular da Google para, inicialmente, desenvolver aplicativos para celulares iOS e Android.

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á definimos que Flutter é um framework para desenvolvimento de aplicações multiplataforma e que um framework é uma ferramenta que visa facilitar o desenvolvimento, vamos entender como é a linguagem que o sustenta.

Dart é uma linguagem de programação que encontra-se na sua versão 2.14, focada em proporcionar uma experiência produtiva e multiplataforma para os desenvolvedores. Ela é orientada a objetos, fortemente tipada, possui null safety (valores nulos permitidos apenas se explicitamente indicados, prevenindo assim 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. Por exemplo, temos dart:collection para trabalhar com coleções de dados, dart:convert que permite manipular com facilidade objetos JSON, funções matemáticas com dart:math, manipulação de entradas e saídas de arquivos, sockets e http utilizando o dart:io, e muitas outras.

Em relação à compilação, temos dois tipos: plataformas nativas como celulares e desktops, e plataformas web. Para dispositivos nativos, o Dart inclui a Dart VM, com compilação Just-In-Time (JIT), permitindo o querido hot-reload e o acompanhamento de métricas em tempo de execução (DevTools), além de um ahead-of-time (AOT) para a produção de código de máquina otimizado para as plataformas 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.

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.

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

Documentação no Flutter

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 até 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. Além disso, o Flutter possui uma documentação muito completa. Portanto, 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:

• Canal Flutterando
• Site Flutterando
• RodrigoRahman
• Balta.io (Flutter e muito mais)
• FilledStacks
• Johannes Milke
• Canal oficial do Flutter (destaque para a playlist The Boring Flutter Development Show)

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

• https://flutter.dev/
• https://www.treinaweb.com.br/blog/o-que-e-flutter
• https://blog.geekhunter.com.br/introducao-ao-flutter-o-framework-do-google/
• https://dart.dev/