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

<div id="toc_container" role="navigation" aria-label="Table of Contents" data-nosnippet class="toc_white no_bullets toc_numbered toc_title_center">Sumário<ul class="toc_list"><li><a href="#O-que-e-e-para-o-que-serve-o-Flutter">1. O que é, e para o que serve o Flutter?</a></li><li><a href="#Dart">2. Dart</a></li><li><a href="#Como-funciona-o-Flutter">3. Como funciona o Flutter?</a><ul><li><a href="#Documentacao-no-Flutter">3.1. Documentação no Flutter</a></li></ul></li><li><a href="#Como-iniciar-no-Flutter">4. Como iniciar no Flutter?</a></li></ul></div>
<h2>O que é, e para o que serve o Flutter?</h2>
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.
<h2>Dart</h2>
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.
<img fetchpriority="high" decoding="async" class="aligncenter" src="https://leonardoleite.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8a6864a4-2d14-43e9-82e8-13f94bfbd42f%2FUntitled.png?table=block&amp;id=33a5224c-eb81-47f6-9a51-d90aae99a9d7&amp;spaceId=6348b891-a171-4fb1-ae4a-c6c5061ef465&amp;width=1590&amp;userId=&amp;cache=v2" alt="Flutter " width="795" height="385" />
Imagem da documentação do Dart, acessado em 15/09/2021 pelo endereço <a style="color: #ed075f;" href="https://dart.dev/overview">https://dart.dev/overview</a>
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!
<a href="https://open.spotify.com/episode/4owUBmq0PG1ITsPgT3pNdJ?si=6eqvMXGvQSqEZ76fzSX5iQ&amp;dl_branch=1&amp;nd=1"><img decoding="async" class="wp-image-18477 aligncenter" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/09/CTA-EntreChaves58.png" alt="" width="617" height="392" data-wp-editing="1" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/09/CTA-EntreChaves58.png 862w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/09/CTA-EntreChaves58-300x191.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/09/CTA-EntreChaves58-768x488.png 768w" sizes="(max-width: 617px) 100vw, 617px" /></a>
<h2>Como funciona o Flutter?</h2>
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.
<img decoding="async" class="aligncenter" src="https://leonardoleite.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4f9df530-1209-4a47-aaa7-cb0a92f32cef%2FUntitled.png?table=block&amp;id=e66994ca-0a0e-4b78-a1be-7c27f144b3de&amp;spaceId=6348b891-a171-4fb1-ae4a-c6c5061ef465&amp;width=1060&amp;userId=&amp;cache=v2" alt="Flutter " width="620" height="359" />
Fonte: <a style="color: #ed075f;" href="https://blog.geekhunter.com.br/introducao-ao-flutter-o-framework-do-google/#Ok_Mas_como_funciona">https://blog.geekhunter.com.br/introducao-ao-flutter-o-framework-do-google/#Ok_Mas_como_funciona</a> Acessado em: 15/09/2021
<h3>Documentação no Flutter</h3>
A documentação do Flutter é conhecida por ser muito boa, no <a style="color: #ed075f;" href="https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG">canal do Youtuber tem uma playlist com mais de 100 videos</a> rápidos explicando o funcionamento dos principais principais Widgets utilizados.
<ul>
<li><a style="color: #ed075f;" href="https://api.flutter.dev/flutter/widgets/Container-class.html">Container</a>: utilizado para agrupar um Widget. É possível definir propriedades como cor e tamanho;</li>
<li><a style="color: #ed075f;" href="https://api.flutter.dev/flutter/widgets/Column-class.html">Column</a>: utilizado para agrupar Widgets em coluna. Ele recebe uma lista de filhos (Widgets), ao invés de um único filho;</li>
<li><a style="color: #ed075f;" href="https://api.flutter.dev/flutter/widgets/Row-class.html">Row</a>: utilizado para agrupar Widgets em linha. Ele recebe uma lista de filhos(Widgets), ao invés de um único;</li>
<li><a style="color: #ed075f;" href="https://api.flutter.dev/flutter/material/ElevatedButton-class.html">ElevatedButton</a>: utilizado como botão. Ele tem um atributo &#8220;onPressed&#8220;, que executa uma função quando pressionado, é um child como um widget filho (como text para fazer um botão com texto no centro);</li>
<li><a style="color: #ed075f;" href="https://api.flutter.dev/flutter/widgets/ListView-class.html">ListView</a>: utilizado para criar listas e scroll na tela. Recebe uma lista de filhos(Widgets), ao invés de um único filho;</li>
<li><a style="color: #ed075f;" href="https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html">FutureBuilder</a>: 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;</li>
</ul>
<h2>Como iniciar no Flutter?</h2>
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 <a style="color: #ed075f;" href="https://flutter.dev/docs/get-started/install">passos da própria documentação por esse link</a>.
Para evoluir o conhecimento na ferramenta vou recomendar novamente a <a style="color: #ed075f;" href="https://flutter.dev/docs">documentação</a>, mas a comunidade Flutter no Brasil é muito forte e temos muitos conteúdo que são excelentes. Segue alguns links:
<ul>
<li><a style="color: #ed075f;" href="https://www.youtube.com/c/Flutterando">Canal Flutterando</a></li>
<li><a style="color: #ed075f;" href="https://flutterando.com.br/#/">Site Flutterando</a></li>
<li><a style="color: #ed075f;" href="https://www.youtube.com/c/RodrigoRahman">RodrigoRahman</a></li>
<li><a style="color: #ed075f;" href="https://www.youtube.com/c/baltaio/featured">Balta.io</a> (Flutter e muito mais)</li>
<li><a style="color: #ed075f;" href="https://www.youtube.com/c/FilledStacks/featured">FilledStacks</a></li>
<li><a style="color: #ed075f;" href="https://www.youtube.com/c/JohannesMilke/featured">Johannes Milke</a></li>
<li><a style="color: #ed075f;" href="https://www.youtube.com/c/flutterdev">Canal oficial do Flutter</a> (destaque para a playlist <a style="color: #ed075f;" href="https://www.youtube.com/playlist?list=PLjxrf2q8roU3ahJVrSgAnPjzkpGmL9Czl">The Boring Flutter Development Show</a>)</li>
</ul>
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 <a href="https://www.cms.dtidigital.com.br/venha-ser-dti/">acesse nossa página de carreiras</a>, escolha a vaga que mais se encaixa no seu perfil e venha ser dti!
<hr />
Fontes
<ul>
<li><a href="https://flutter.dev/">https://flutter.dev/</a></li>
<li><a href="https://www.treinaweb.com.br/blog/o-que-e-flutter">https://www.treinaweb.com.br/blog/o-que-e-flutter</a></li>
<li><a href="https://blog.geekhunter.com.br/introducao-ao-flutter-o-framework-do-google/">https://blog.geekhunter.com.br/introducao-ao-flutter-o-framework-do-google/</a></li>
<li><a href="https://dart.dev/">https://dart.dev/</a></li>
</ul>

Flutter: Introdução aos conceitos básicos

Desbloqueie o futuro do seu negócio

Mais conteúdos como esse

Travessa Dona Zilda, 125, sala 203, São Gonçalo – Pelotas, RS. CEP: 96075-166

14841 Dallas Parkway, 8th Floor Addison, TX 75254

R. Levindo Lopes, 357, 5º e 12º Andar – Savassi, Belo Horizonte MG, 30112-010