Flutter 3.22 e Dart 3.4: Confira as atualizações que roloram no Google I/O 2024
Tags: flutter, googleio, dart
Published: 2024-05-18 14:06:17

![](https://cdn-images-1.medium.com/max/800/0*VKDPcLqGSThJ1mMZ)

Fala Devs!

Nesta semana lá na California rolou o evento anual da Google que ela apresenta seus principais lançamentos do ano chamado Google I/O.

![](https://cdn-images-1.medium.com/max/800/1*nRViprMa-oD6tRSj24uoSQ.png)

Na terça feira foi realizado o keynote principal, transmitido ao vivo em vários canais, e muitos ficaram decepcionados pois nada se falou sobre Flutter. Mas vou te contar um segredo, a Google não é uma empresa de desenvolvimento de software e nunca foi o foco da Google as ferramentas de desenvolvimento e em todos os Google I/O passados nunca foi falado de uma ferramenta de desenvolvimento no keynote principal, geralmente eles anunciam produtos que irão gerar receitas, como foi o caso nos anos passados do Google Glass, Pixel Fold, Stadia, versões do android e nesse ano, como IA é o assunto do momento e todas as empresas do mundo só fala nisso, o GEMINI.

![](https://cdn-images-1.medium.com/max/800/1*lZUGYnQ-Um78Bf3n8W8OcA.png)

Mas calma jovem gafanhoto, disse que não teve Flutter apenas no Keynote de abertura/principal, passados algumas horas teve o keynote de abertura voltado ao desenvolvimento apresentando as novidades que irão rolar em TODOS os produtos google voltado a desenvolvedores como o Firebase que agora terá uma versão SQL, o KMP e brevemente falaram sobre o Flutter que agora na versão 3.22 está com o WebAssembly na stable e os MacrOS em experimental

![](https://cdn-images-1.medium.com/max/800/1*A4lcvO8S5nJPCOHO0gEADQ.png)

No dia seguinte (Quarta-feira) foi o dia que rolaram mais keynotes, daí sim, voltada a desenvolvedores e foram disponibilizadas online para que possamos assistir, confira em [https://io.google/2024/explore/?q=flutter](https://io.google/2024/explore/?q=flutter)

E tivemos uma para mostrar as novidades do Flutter intitulada como “What is new in Flutter”

![](https://cdn-images-1.medium.com/max/800/1*SvFO5pi25inJx6ZpqYjbnw.png)

Nesse keynote apresentada por dois engenheiros da equipe do Flutter e Dart, o Kevin Moore e John Ryan eles apresentaram as novidades que vieram junto com o Flutter 3.22.0

Primeiramente eles apresentaram os novos cases questão utilizando Flutter

![](https://cdn-images-1.medium.com/max/800/1*B_b-28LHTe-5o86oUDK8cw.png)

Primeiramente falaram da Bricket que é um aplicativo para Android e iOS que usa IA para reconhecer LEGOS espalhados e com base nisso consegue dar várias ideias do que pode ser construído com os LEGOS disponíveis e ainda mostrará a localização exata de onde estão localizadas, eles ficaram bem animados com o poder do Flutter e já estão preparados para uma versão Web em menos de uma semana.

![](https://cdn-images-1.medium.com/max/800/0*YP6ANiNAQHPENHcg.gif)

A SuperCell, criadora de jogos como Hay Day, Clash of Clans, Boom Beach, Clash Royale, Brawl Stars e Squad Busters, decidiram utilizar o flutter na parte de gerenciamento de usuários e amigos e estão divididos em trocar todo o resto do aplicativo para flutter muito brevemente.

![](https://cdn-images-1.medium.com/max/800/1*vu9002-_kM9t_TxMynQBeQ.png)

O Google Earth também tinha um problema de ter que manter varias stacks Android, iOS e web então ano passado decidiram migra-lo para utilizar Flutter pois dessa forma com um codebase só gerar aplicativos para Android, iOS e web tendo o mesmo comportamento.

![](https://cdn-images-1.medium.com/max/800/1*0cYbSoinUloU_4wE7anKpA.png)

![](https://cdn-images-1.medium.com/max/800/1*uFQi6sCAyHq-0s9xlht6Yw.png)

![](https://cdn-images-1.medium.com/max/800/1*efoWWoVTxW22BAaxa9Mo9A.png)

Também falaram da Universal e da LG que decidiram utilizar Flutter e com isso Ryan e Moore afimaram que Flutter se tornou o framework cross-platform mais popular do mundo

![](https://cdn-images-1.medium.com/max/800/1*ViBUnrEiJdWXxe7GWS633g.png)

Bom até agora só falamos de novos adeptos ao Flutter mas e as novidades? Vamos começar a falar

![](https://cdn-images-1.medium.com/max/800/1*QLyxqZ2Ctpn_dfxi94NwUw.gif)

### Os 5 pilares

![](https://cdn-images-1.medium.com/max/800/1*7LcsHlIdirscUbdPaca7DQ.png)

Nesta apresentação foi destacado os cinco pilares do Flutter e que qualquer alteração no Flutter será pautada em ao menos um desses cincos pilares: portabilidade, beleza, velocidade, produtividade e open source.

### Portabilidade

Toda e qualquer decisão do Flutter deve permitir que os desenvolvedores possam escrever código que pode ser executado em várias plataformas, como iOS, Android, web, Windows, macOS e Linux.

### Beleza

O Flutter fornece uma maneira de criar interfaces de utilizador atraentes e de alta qualidade.

### Velocidade

O Flutter é conhecido por sua rápida performance e renderização, o que permite aos desenvolvedores criar aplicações responsivas e performáticas.

### Produtividade

O Flutter dispõe uma gama de recursos de auxiliam a produtividade, como hot-reload que permitem aos desenvolvedores ver as mudanças de código em tempo real e o DevTools

### Open-Source

O Flutter é um projeto de código aberto, o que significa que os desenvolvedores podem contribuir para o projeto e usar recursos de uma vasta comunidade de desenvolvedores.

### GEMINI

![](https://cdn-images-1.medium.com/max/800/1*LZ-7_eTgSZSOWu-5fGJZxA.png)

Sei que é um assunto que alguns já devem estar cansados, mas o fato é que a inteligência artificial é o assunto do momento e a Google está investindo pesado na sua nova ferramenta baseada em Large Language Model (LLM).

![](https://cdn-images-1.medium.com/max/800/1*JdUFVoOAcesy7w1YDRQn2g.png)

O Flutter não poderia ficar pra trás e agora com o Google AI Dart SDK é possível integrar facilmente seus aplicativos Flutter com qualquer um dos modelos de IA generativa da Google, incluindo o Gemini. Já escrevi sobre ele por aqui ([https://medium.com/brasilflutter/oficial-gemini-google-ai-dart-flutter-sdk-integrando-flutter-com-o-gemini-90c46f8c2f7a](https://medium.com/brasilflutter/oficial-gemini-google-ai-dart-flutter-sdk-integrando-flutter-com-o-gemini-90c46f8c2f7a)).

Para adicionar em seu projeto basta executar

![](https://cdn-images-1.medium.com/max/800/1*1IKUbK_nTv7SvWQTphou1g.png)

E a utilização em código fica muito simples também

![](https://cdn-images-1.medium.com/max/800/1*vz51MUJ49c5ZUf06yNmydA.png)

E seguindo os pilares do Flutter ele entra muito em sinergia com dois pilares Portabilidade, pois você pode utilizar o poder do Gemini codando apenas uma vez e rodando em qualquer lugar, e o pilar de Produtividade porque com o Google Generative AI conseguirá fazer a integração com GEMINI de forma muito simples e muito rápido.

![](https://cdn-images-1.medium.com/max/800/1*XJ4rdQs78zpyG9icLOatZg.png)

Para maiores informações acesse [https://flutter.dev/ai](https://flutter.dev/ai)

### Games

O Flutter é ótimo para o desenvolvimento de aplicativos, mas a equipe do Flutter vem investindo muito também no desenvolvimento de jogos.

![](https://cdn-images-1.medium.com/max/800/1*gflXs3rQ8Akd5jAgSVlypA.png)

A arquitetura do Flutter, embora robusta e flexível, permite a criação de camadas com acesso a níveis inferiores. Essa flexibilidade possibilita o desenvolvimento de uma engine que facilita a interoperabilidade entre diferentes componentes e sistemas.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxozjgqz4wz7kkl57f8z.png)



E foi exatamente isso que o pessoal do Flame que é engine para jogos 2D que utiliza Dart e Flutter mantida por uma comunidade open-source, disponibilizando uma API de desenvolvimento alto nível para jogos

![](https://cdn-images-1.medium.com/max/800/1*QMci68eZvFjLUEFOQT1sPQ.png)

E com ele podemos fazer jogos muito divertidos como o exemplo abaixo

![](https://cdn-images-1.medium.com/max/800/1*iUdcGYe-0W6Z1OH3rE5hvQ.gif)

Com Flame conseguimos inicializar a construção de um jogo utilizando os conceitos primeiros de um jogo, como game loop, física e detecção de colisão 2D.

E com a novo suporte ao DevTools Extensions lançada ano passado no flutter 3.16 a galerinha do Flame também fizeram sua extensão ao DevTools onde nos possibilita pausar o game loop, executar frame a frame e inspecionar os elementos na tela

![](https://cdn-images-1.medium.com/max/800/1*jpu7dRI5n47yib7giVx9ww.gif)

E desde ano passado a equipe do Flutter tem investindo bastante no Casual Games Toolkit e ele está disponível para testar no DartPad.

![](https://cdn-images-1.medium.com/max/800/1*hJljKU-P3PkD5l-St_TGEg.png)

E essa questão dos jogos está muito em acordo com os cinco pilares do Flutter

![](https://cdn-images-1.medium.com/max/800/1*bDpByOQM3m_3Z8dgM7501Q.png)

Para saber mais acesse [https://flutter.dev/games](https://flutter.dev/games)

### Impeller

Já tínhamos ouvido falar do impeller, o novo renderizador gráfico, ano passado na ultima versão do Flutter 3.16 que já estava disponível para o iOS, agora na versão 3.22 também está disponível para Android.

![](https://cdn-images-1.medium.com/max/800/1*K0pPKA-VBU3XLBVAEwqsww.gif)

Atualmente o Flutter usa o Skia como motor de renderização para desenhar várias operações complexas compilando em um shader para executar em sua GPU, isso causa uma grande sensação de performance, entretanto pode causar algumas perdas de frames na primeira compilação quando temos muitos widgets na tela, como o exemplo acima.

![](https://cdn-images-1.medium.com/max/800/1*VacR9-eyD9w_StL_vqDAYw.gif)

Para isso a equipe do Flutter reescreveu o motor de renderização trazendo uma melhor performance para seus aplicativos. O Impeller foi projetado para ser mais rápido e eficiente do que o motor de renderização original do Flutter, “Skia”. Isso é especialmente útil para aplicações com muitos widgets e animações complexas, onde a performance é crucial para uma experiência suave. Uma das melhorias que já podemos notar é a renderização de efeito de desfoque no iOS chegando a ser duas vezes mais rápido.

![](https://cdn-images-1.medium.com/max/800/1*BsHfGYIVITAuE647ac3uGQ.gif)

Para utilizarmos o impeller adicione a flag **— — enable-impeler** no **flutter run**

![](https://cdn-images-1.medium.com/max/800/1*yGBrtuBLY5_IngWBxz7Mkw.png)

Para maiores informações acesse [https://docs.flutter.dev/perf/impeller](https://docs.flutter.dev/perf/impeller)

O impeller fica muito alinhado com o pilar de portabilidade e velocidade por trazer mais portabilidade (agora o android em stable) e trazer mais performance em seus aplicativos

![](https://cdn-images-1.medium.com/max/800/1*TUC8j3OD85Jn6REMMmsOPA.png)

### **Macros**

Agora a estrela do dia que todos estavam esperando com toda certeza foi as Macros que na versão 3.22 foi anunciado que está na fase de experimental, isso significa que logo chegará a stable (a Google tem planos de ainda lançar este ano), como sabemos o Dart do Flutter não temos a famosa reflection e o Dart do Flutter é capado e não temos acesso aos Mirrors, fazendo com que não seja possível a meta-programação e fiquemos reféns do odiado build_runner.

E por muito tempo os Devs flutter solicitavam a equipe do Flutter coisas simples, como deserializaçao de JSON e Data Class nativa no Dart para que não precisássemos fazer na mão ou utilizar package terceiros.

![](https://cdn-images-1.medium.com/max/800/1*h4mQ60SB8Z3bn85B-nU5lw.png)

Ao contrario do que imaginamos a equipe do Flutter ouvia essas solicitações entretanto implementar esses metodos acima sem o auxilio de reflections ou geraçao de codigo não é tao simples e geravam muitos problemas.

![](https://cdn-images-1.medium.com/max/800/1*ZL8VcPPBh9ex0kKYLo_rLA.png)

Então a solução infelizmente era, desenvolver esses métodos na mão ou utilizar um package terceiro que iria gerar esse código com o auxílio do build_runner. Ambas as soluções deixavam o desenvolvimento lento e inflexível.

![](https://cdn-images-1.medium.com/max/800/1*gmtLcwfwdMXj-5luXArMiQ.png)

Então a solução que a Google está desenvolvendo para resolver este problema são as Macros que foi oficialmente lançado agora na fase experimental, que veio para nos auxiliares na meta programação.

![](https://cdn-images-1.medium.com/max/800/1*Ke3F2AcNwfEDQ9vxrJDDtA.gif)

Para mais informações acesse [https://dart.dev/language/macros](https://dart.dev/language/macros)

Com isso continuamos alinhados com os pilares do flutter.

Melhor produtividade: As macros podem ajudar os desenvolvedores a escrever código mais rápido e conciso, reduzindo a quantidade de código repetitivo.

Performance: As macros podem otimizar o código Dart para um melhor desempenho, especialmente em cenários de alta demanda, como desenvolvimento de jogos.

Open source: você pode personalizar a definição como as “Data Classes” usando macros. Isso permite um controle preciso sobre o comportamento e os dados que sua classe de dados gerencia.

![](https://cdn-images-1.medium.com/max/800/1*Rb34542dsqyX6sogD9YE3Q.png)

### Web Assembly

No Google I/O foi finalmente lançado o WebAssembly para Flutter Web e foi demonstrado como uma tecnologia que está expandindo os horizontes do Flutter para a web, abrindo novas possibilidades para performance e complexidade de aplicações web. O WebAssembly permite que aplicações Flutter para a web renderizem gráficos complexos com alta qualidade e performance.

![](https://cdn-images-1.medium.com/max/800/1*i1HpN1Gml5SKckWV_blF_g.png)

Os pontos principais sobre WebAssembly foram:

Performance: O WebAssembly permite que código compilado, como o código Dart do Flutter, seja executado em navegadores web com uma performance muito mais próxima do código nativo. Isso significa que aplicações Flutter para a web podem ser tão rápidas e eficientes quanto aplicações nativas.

Extensão do Ecossistema: O WebAssembly permite integrar bibliotecas de código nativo (C, C++, Rust) em aplicações web, aumentando a capacidade de lidar com tarefas complexas que antes eram limitadas a aplicações nativas.

Novo Nível de Interatividade: Com o WebAssembly, aplicações web podem ter um nível de interatividade e complexidade antes restrito a aplicações nativas. Isso abre portas para aplicações web mais avançadas, como jogos complexos e aplicações com gráficos intensivos.

Fazendo um benchmark com um código e gerando para Android, Web (utilizando o motor de JS) e com o Wasm teremos o dobro de performance com Wasm em relação de como utilizamos o flutter web hoje.

![](https://cdn-images-1.medium.com/max/800/1*acy_AWUKA74mBFvxb1LWNw.png)

![](https://cdn-images-1.medium.com/max/800/0*7yWujA-ZPvZqQtk9)

O WebAssembly é um componente fundamental para o futuro do Flutter na web, permitindo que a plataforma alcance um nível de performance e complexidade que antes era inimaginável e irá revolucionar a forma como as aplicações Flutter são construídas para a web. Uma tecnologia promissora que abre novas possibilidades para o desenvolvimento web com o Flutter. Essa tecnologia permite que aplicações web Flutter alcancem performance próxima do código nativo e integrem bibliotecas nativas, tornando-as mais complexas e interativas. Estando completamente alinhados com os pilares do flutter.

![](https://cdn-images-1.medium.com/max/800/1*yYLDMx7J58SeMZ57Gvt8Tw.png)

Para mais informações acesse [https://flutter.dev/wasm](https://flutter.dev/wasm)

Bom então resumindo tivemos 5 grandes atualizações que causam impactos enormes para nosso desenvolvimento

![](https://cdn-images-1.medium.com/max/800/1*MJ4VxNX-wgt05bHKr5gKyw.png)

Não foram muitas novidades, em questão de quantidade, mas o impacto que essas pequenas melhorias vão causar é inimaginável.

Aguardemos as próximas atualizações

Confira a talk na integra

[**What’s new in Flutter 3.22**](https://medium.com/flutter/whats-new-in-flutter-3-22-fbde6c164fe3 "https://medium.com/flutter/whats-new-in-flutter-3-22-fbde6c164fe3")[](https://medium.com/flutter/whats-new-in-flutter-3-22-fbde6c164fe3)

![](https://cdn-images-1.medium.com/max/800/1*12QvPBZZuDYn_fk5raBGNA.png)

Entre em nosso discord para interagir com a comunidade e ficar por dentro de todas as nossas publicações: flutterbrasil.com.br