Flutter: Introdução aos conceitos básicos

Por Leonardo Leite|
Atualizado: Jul 2023 |
Publicado: Set 2021

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.

Quer ver mais conteúdos como esse?

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.

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

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:

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

Quer saber mais?

Desenvolvimento de Software

Confira outros artigos

Whatsapp Business - Mais do que um chatbot

WhatsApp Business na sua estratégia: muito além de um chatbot

Podemos dizer adeus a conversas monótonas com chatbots limitados e sem personalidade. Daqui em diante, veremos interfaces conversacionais oferecendo experiências digitais cada vez mais sofisticadas. Em outro artigo, abordamos como mais experiências estão sendo convertidas, progressivamente, em conversas e como essa tendência é potencializada pelos avanços nos modelos de Inteligência Artificial e nos canais de […]

Desenvolvimento de Software

inteligencia-artificial-ia-como-otimizacao-para-grandes-empresas

A Inteligência Artificial (IA) e otimização operacional nas empresas

Sumário1 Como a Inteligência Artificial (IA) pode otimizar operações empresariais e aumentar a eficiência? Descubra aqui!  2 Automatização de tarefas repetitivas e demoradas 2.1 Exemplos de IA para economia de tempo2.2 10 exemplos de como utilizar a Inteligência Artificial (IA) para automatizar tarefas repetitivas e/ou demoradas: 3 Melhoria da eficiência e redução de custos com Inteligência Artificial (IA)3.1 […]

Desenvolvimento de Software

Desenvolvimento Android e iOS

Desenvolvimento Android x iOS: 10 recomendações para o desenvolvimento produtivo

Entre agosto de 2022 e junho de 2023, o mercado de aplicativos móveis experimentou um crescimento notável, projetando um aumento anual de 13,4% até 2030, alcançando um mercado estimado em US$ 187,58 bilhões. E, certamente, a tendência é que essa expansão continue exponencialmente nos próximos anos.  Portanto, agora é a hora de explorar as oportunidades […]

Desenvolvimento de Software

Veja outros artigos de Desenvolvimento de Software