No dia 3 de março de 2021, tivemos o anúncio da nova versão do Flutter, a 2.0. Essa atualização traz  features novas, adaptabilidade para web e desktop, a otimização de execução com Null Safety e Sound Null Safety com Dart, entre outras coisas.

Flutter na Web?

Sim! Isso mesmo que você leu.

O Flutter em si foi criado pensando em atender a todos os Client Sides, sejam eles Mobile, Web, Desktop e até Embarcado.

Até agora, Flutter se demonstrou muito eficaz para resolver problemas relacionados a Mobile. Com a nova versão, o Flutter 2.0 trouxe a opção estável de Web - estável porque até então a versão Web estava em beta, mas já funcionava bem.

O mais legal disso é que projetos já criados podem ser transformados em Web, apenas por atualizando o SDK do Flutter e atualizando os pacotes, já que alguns deles não são compatíveis com a Web.

Mas, você deve estar se perguntando, Flutter Web é feito com Javascript? É igual a VueJs ou ReactJs?

Como o Flutter funciona na Web?

O Flutter usa dois tipos de renderizadores ao ser utilizado na Web: o HTML, que é utilizado para priorizar o tamanho dos arquivos, e o CanvasKit, que é utilizado para priorizar a performance da aplicação, ambos em desktop ou mobile

A recomendação é que o render HTML seja usado para browsers mobile, uma vez que o usuário pode estar numa rede não muito boa e a prioridade é entregar mais rapidamente as requisições, já que ele usa CSS, SVG e Canvas para renderizar as telas.

No CanvasKit, a recomendação é para browsers em desktop, pois geralmente o usuário está numa rede WIFI e pode se dar ao luxo de gastar rede para receber as requisições, já que essa opção aumenta em 2MB o tamanho dos arquivos.

Com isso, o Dart usa o render escolhido para desenhar as telas, como faz com as plataformas Android e iOS, não precisando usar código nativo, que no caso da Web é JavaScript ou WebAssembly.

Mas, não só para Web e Mobile o Flutter foi feito!

Flutter em Desktop

Além do lançamento da versão estável do Flutter para Web, foi anunciado também a versão early release flag. A decisão de colocar uma versão de desktop que está em early release flag na versão estável do Flutter foi feita porque a versão para Desktop está de fato quase pronta e testada, porém ainda com possibilidade de falhas.

Para rodar é um pouco mais complexo e vou deixar para o próprio artigo do Flutter ensinar a migrar seu projeto para desktop.

Vale lembrar que essa feature ainda não está 100% estável, por isso não é recomendável utiliza-lá em produção.

Dart e o Null Safety

Uma outra grande atualização no ecossistema do Flutter foi o update do Dart 2.0 e a utilização de Null Safety.

Como Dart é uma linguagem altamente tipada, ele é capaz de prever alguns erros antes mesmo de compilar o código, porém não previa quando uma variável é nula, o que pode gerar problemas em uma aplicação Client side, já que o usuário vê esse problema acontecendo e sua app travada.

Com o Null Safety, agora o Dart é capaz de te ajudar e identificar o que pode ser nulo ou não, o que é necessário ter um valor ou não, e com isso evitar crashes da sua aplicação, além de também evitar a verificação manual se a variável é nula ou não.

Basicamente é uma nova maneira de deixar seu código Dart mais confiável e diminuir as possibilidades de algum erro.

Para migração do seu projeto que não usa Null Safety, há uma ferramenta oficial de portabilidade e ativação do Sound Null Safety.

O que é Sound Null Safety

Acompanhando o Null Safety, o Sound Null Safety é utilizado pelo Dart para deixar seu código mais performático, ajudando o compilador a não verificar se uma variável é nula, já que o Sound Null Safety já provou que essa mesma variável não pode ser nula usando o Null Safety, reduzindo consideravelmente a quantidade de instruções que o compilador precisa executar.

Com isso, temos um código mais confiável e mais performático!

Conclusão

O Flutter 2.0 agora tem capacidade de ser entregue tanto para Mobile (Android e iOS) quanto para Web, e com a ajuda do Null Safety e Sound Null Safety podemos ter um código mais confiável e performático.

Essa atualização de versão do Flutter trouxe mais uma opção na hora de desenvolver sua aplicação, podendo ter apenas um código para várias plataformas.

Agora é botar a mão na massa e se aventurar em aplicações Mobile e Web, e logo mais Desktop!

• Leia também: Flutter: Conhecimentos para uma escolha inteligente

Referências:

• Flutter on Desktop | Flutter
• Understanding null safety | Dart
• Web renderers | Flutter