O que há de novo no Flutter 2?

Ano passado, escrevi dois artigos aqui na Smashing Magazine sobre o uso do Flutter em plataformas web e desktop. O primeiro artigo foi uma introdução geral ao desenvolvimento web e desktop, e focou na construção de UI responsiva; o segundo artigo foi sobre os desafios que você pode enfrentar ao tentar desenvolver um aplicativo Flutter que seja executado em várias plataformas.

Naquela época, o suporte do Flutter para plataformas não móveis não era considerado estável e pronto para produção pela equipe do Flutter, mas as coisas mudaram agora.

Flutter 2 está aqui

No dia 3 de março, o Google realizou o evento Flutter Engage, onde o Fluter 2.0 foi lançado. Esta versão é realmente uma versão 2.0 adequada, com muitas mudanças prometendo deixar o Flutter realmente pronto para ir além do desenvolvimento de aplicativos móveis.

A mudança que é central para entender por que o Flutter 2.0 é importante é que o desenvolvimento da web agora é oficialmente parte do canal estável e o suporte para desktop seguirá em breve também no canal estável. Na verdade, ele está atualmente habilitado na forma de candidato a lançamento como um instantâneo beta de lançamento antecipado no canal estável.

No anúncio, o Google não deu apenas uma dica de como será o futuro do Flutter. Também houve exemplos reais de como grandes empresas já estão trabalhando em aplicativos Flutter para substituir seus aplicativos existentes por outros com melhor desempenho e permitir que os desenvolvedores sejam mais produtivos. Por exemplo, a maior fabricante de automóveis do mundo, a Toyota, agora estará construindo o sistema de infoentretenimento em seus carros usando o Flutter.

Outro anúncio interessante - este mostrando o quão rápido o Flutter está melhorando como um SDK multiplataforma - é o anúncio da Canonical de que, além de desenvolver seu novo instalador do Ubuntu usando o Flutter, eles também usarão o Flutter como opção padrão para criar aplicativos de desktop.

Eles também lançaram uma versão Flutter do tema Yaru do Ubuntu, que usaremos mais adiante no artigo para construir um aplicativo de desktop Flutter que se pareça perfeitamente em casa no desktop Ubuntu, também usando mais alguns dos novos recursos do Flutter. Você pode dar uma olhada no anúncio do Google Flutter 2 para obter uma imagem mais completa.

Vamos dar uma olhada em algumas das mudanças técnicas no Flutter que chegaram ao canal estável com a versão 2.0 e construir um aplicativo de desktop de exemplo muito simples com o Flutter antes de tirarmos algumas conclusões sobre quais tipos de projeto específicos podemos e não podemos usar o Flutter a partir de agora.

Alterações gerais de usabilidade para dispositivos maiores

De acordo com o anúncio, muitas mudanças foram feitas no Flutter para fornecer melhor suporte para dispositivos que não são dispositivos móveis.

Por exemplo, um exemplo óbvio de algo que era necessário para aplicativos da Web e de desktop e até agora precisava ser feito usando pacotes de terceiros ou implementando-o você mesmo é uma barra de rolagem .

Agora há uma barra de Scrollbar embutida que pode se encaixar direitinho no seu aplicativo, parecendo exatamente como uma barra de rolagem deve ficar na plataforma específica: com ou sem faixa, com possibilidade de rolar clicando na faixa, por exemplo, que é enorme se você quiser que seus usuários se sintam em casa desde o início ao usar seu aplicativo Flutter. Você também pode tema-lo e personalizá-lo.

Também parece que, em algum momento, o Flutter mostrará automaticamente as barras de rolagem adequadas quando o conteúdo do aplicativo for rolável.

Enquanto isso, você pode simplesmente envolver qualquer visualização rolável com o widget da barra de rolagem de sua escolha e criar um ScrollController para adicionar como o controller para a barra de rolagem e o widget rolável (caso você nunca tenha usado um ScrollController , você usa exatamente como um TextEditingController para um TextField ). Você pode ver um exemplo do uso de uma barra de rolagem de material normal um pouco mais abaixo neste artigo no exemplo do aplicativo para desktop.

Alterações na Web Flutter

O Flutter para a web já estava em uma forma bastante utilizável, mas havia problemas de desempenho e usabilidade, o que significava que nunca parecia tão polido quanto o Flutter móvel. Com o lançamento do Flutter 2.0, houve muitas melhorias, especialmente quando se trata de desempenho .

O destino de compilação, anteriormente muito experimental e complicado de usar para renderizar seu aplicativo (com WebAssembly e Skia) agora é chamado de CanvasKit . Ele foi refinado para oferecer uma experiência consistente e de alto desempenho ao passar de executar um aplicativo Flutter nativamente em dispositivos móveis para executá-lo em um navegador.

Agora, por padrão, seu aplicativo será renderizado usando o CanvasKit para usuários da web de desktop e com o renderizador de HTML padrão (que também teve melhorias, mas não é tão bom quanto o CanvasKit) para usuários da web móvel.

Se você tentou usar o Flutter para criar aplicativos da Web, deve ter notado que não era particularmente intuitivo ter algo tão simples quanto um hiperlink. Agora, pelo menos, você pode criar hiperlinks um pouco mais como faria ao usar HTML, usando a classe Link .

Na verdade, isso não é uma adição ao próprio Flutter, mas uma adição recente ao pacote url_launcher do Google. Você pode encontrar uma descrição completa e exemplos de uso da classe Link na referência oficial da API.

A seleção de texto foi aprimorada, pois agora o ponto de pivô corresponde a onde o usuário começou a selecionar o texto e não a borda esquerda do SelectableText em questão. Além disso, agora as opções Copiar/Recortar/Colar existem e funcionam corretamente.

No entanto, a seleção de texto ainda não é excelente, pois não é possível selecionar texto em diferentes widgets SelectableText e o texto selecionável ainda não é o padrão, mas falaremos sobre isso, bem como outras desvantagens pendentes da web Flutter (falta de suporte SEO , em primeiro lugar) na conclusão deste artigo.

Alterações na área de trabalho do Flutter

Quando escrevi sobre desenvolvimento web e desktop com Flutter no ano passado, concentrei-me principalmente na construção de aplicativos web com Flutter, já que o desenvolvimento desktop ainda era considerado muito experimental (nem mesmo no canal beta ). Agora, porém, o suporte para desktop Flutter seguirá em breve o suporte da Web e ficará estável.

O desempenho e a estabilidade foram bastante aprimorados, e as melhorias na usabilidade geral para dispositivos maiores operados com mouse e teclado que beneficiam tanto os aplicativos da Web também significam que os aplicativos de desktop Flutter agora são mais utilizáveis.

Ainda há falta de ferramentas para aplicativos de desktop e ainda há muitos bugs pendentes bastante graves, portanto, não tente usá-lo para seu próximo projeto de aplicativo de desktop destinado à distribuição pública.

Exemplo de aplicativo de desktop criado com Flutter

O suporte para desktop Flutter agora é bastante estável e utilizável, e certamente melhorará no futuro, assim como o Flutter em sua totalidade melhorou até agora, então vamos tentar vê-lo em ação ! Você pode baixar o exemplo de código inteiro em um repositório do GitHub.

O aplicativo que vamos construir é o seguinte aplicativo muito simples. Temos uma barra lateral de navegação junto com alguns itens de conteúdo para cada uma das seções de navegação.

A primeira coisa a fazer é descobrir suas dependências .

Antes de tudo, você deve ter o desenvolvimento de desktop Flutter ativado, usando o comando

 flutter config --enable-${OS_NAME}-desktop

onde você substituiria ${OS_NAME} pelo sistema operacional de desktop de sua escolha, seja windows , linux ou macos . Para este exemplo, usarei o Linux, pois usaremos o tema Ubuntu.

Existem também outras dependências necessárias para construir aplicativos nativos para cada plataforma, por exemplo, no Windows você precisa do Visual Studio 2019, no macOS você precisa do Xcode e CocoaPods e você pode encontrar uma lista atualizada de dependências do Linux no site oficial do Flutter.

Em seguida, crie um projeto Flutter, executando:

 flutter create flutter_ubuntu_desktop_example

Em seguida, devemos obter o tema em si (a única dependência do nosso aplicativo) adicionando yaru às dependencies do seu aplicativo em pubspec.yaml (na raiz da árvore de origem):

 dependencies: yaru: ^0.0.0-dev.8 flutter: sdk: flutter

Em seguida, vamos para lib/main.dart , onde reside o código do nosso aplicativo.

Primeiro, importamos o material de que precisamos. Nesse caso, vamos apenas importar a biblioteca regular do Flutter Material Design e o tema Yaru (só vamos usar o tema light para este exemplo, então vamos show apenas um objeto no pacote Yaru):

 import 'package:flutter/material.dart'; import 'package:yaru/yaru.dart' show yaruLightTheme;

Em vez de ter uma classe de aplicativo separada, vamos chamar os construtores MaterialApp diretamente em main ao chamar runApp , então é onde definimos o tema do aplicativo, que será o tema Yaru, mais especificamente o tema leve chamado yaruLightTheme :

 void main() => runApp(MaterialApp( theme: yaruLightTheme, home: HomePage(), ));

A HomePage será um StatefulWidget , contendo os dados que mostraremos, pois é imutável (lembre-se, os widgets são sempre imutáveis, a mutabilidade é tratada no State de um StatefulWidget ):

 class HomePage extends StatefulWidget { final dataToShow = { "First example data": [ "First string in first list item", "Second in first", "Example", "One" ], "Second example": [ "This is another example", "Check", "It", "Out", "Here's other data" ], "Third example": [ "Flutter is", "really", "awesome", "and", "it", "now", "works", "everywhere,", "this", "is", "incredible", "and", "everyone", "should", "know", "about", "it", "because", "someone", "must", "be", "missing", "out", "on", "a lot" ] }.entries.toList(); @override createState() => HomePageState(); }

O HomePageState é onde definimos a interface do usuário e o comportamento do aplicativo. Primeiro de tudo, vamos olhar para a árvore de widgets que queremos construir (lista e itens de grade e widgets de espaçamento excluídos):

Vamos restringir a Column à esquerda (a que mostra os controles para os widgets a serem exibidos no lado direito do aplicativo) a uma certa largura (400 pixels por exemplo) usando um Container , enquanto o GridView à direita deve ser Expanded para preencher a vista.

No lado esquerdo da Row (dentro da Column ), o ListView deve se expandir para preencher o espaço vertical abaixo da Row de botões na parte superior. Dentro da Row na parte superior, também precisamos expandir o TextButton (o botão de reinicialização) para preencher o espaço à direita da divisa esquerda e direita IconButton s.

O HomePageState resultante que faz tudo isso, junto com a lógica necessária para mostrar as coisas certas à direita, dependendo do que o usuário selecionar à esquerda, é o seguinte:

 class HomePageState extends State<HomePage> { int selected = 0; ScrollController _gridScrollController = ScrollController(); incrementSelected() { if (selected != widget.dataToShow.length - 1) { setState(() { selected++; }); } } decrementSelected() { if (selected != 0) { setState(() { selected--; }); } } @override Widget build(BuildContext context) { return Scaffold( body: Row( children: [ Container( color: Colors.black12, width: 400.0, child: Column( children: [ Row( children: [ IconButton( icon: Icon(Icons.chevron_left), onPressed: decrementSelected, ), IconButton( icon: Icon(Icons.chevron_right), onPressed: incrementSelected, ), Expanded( child: Center( child: TextButton( child: Text("Reset"), onPressed: () => setState(() => selected = 0), ), )) ], ), Expanded( child: ListView.builder( itemCount: widget.dataToShow.length, itemBuilder: (_, i) => ListTile( title: Text(widget.dataToShow[i].key), leading: i == selected ? Icon(Icons.check) : Icon(Icons.not_interested), onTap: () { setState(() { selected = i; }); }, ), ), ), ], )), Expanded( child: Scrollbar( isAlwaysShown: true, controller: _gridScrollController, child: GridView.builder( controller: _gridScrollController, itemCount: widget.dataToShow[selected].value.length, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 200.0), itemBuilder: (_, i) => Container( width: 200.0, height: 200.0, child: Padding( padding: const EdgeInsets.all(8.0), child: Card( child: Center( child: Text(widget.dataToShow[selected].value[i])), ), ), )), ), ), ], ), ); } }

e terminamos!

Em seguida, você cria seu aplicativo com

 flutter build ${OS_NAME}

onde ${OS_NAME} é o nome do seu sistema operacional, o mesmo que você usou anteriormente para habilitar o desenvolvimento de desktop Flutter usando flutter config .

O binário compilado para executar seu aplicativo será

 build/linux/x64/release/bundle/flutter_ubuntu_desktop_example

em Linux e

 build\windows\runner\Release\flutter_ubuntu_desktop_example.exe

no Windows, você pode executá-lo e obterá o aplicativo que mostrei no início desta seção.

No macOS, você precisa abrir macos/Runner.xcworkspace no Xcode e usar o Xcode para criar e executar seu aplicativo.

Outras alterações de vibração

Também houve algumas mudanças que também afetam o desenvolvimento móvel com o Flutter, e aqui está apenas uma breve seleção de algumas delas.

Um recurso que muitos de nós, desenvolvedores do Flutter, queríamos é um melhor suporte para anúncios AdMob , e agora está finalmente incluído no pacote oficial google_mobile_ads . Outro é autocomplete ; há um widget de material Autocomplete para ele, bem como um widget RawAutocomplete mais personalizável.

A adição do Link que discutimos na seção sobre desenvolvimento web realmente se aplica a todas as plataformas , mesmo que seus efeitos sejam mais sentidos por aqueles que trabalham em projetos web Flutter.

Alterações recentes no idioma do Dart

É importante estar ciente das alterações feitas na linguagem Dart que afetam o desenvolvimento do aplicativo Flutter.

Em particular, o Dart 2.12 trouxe suporte à interoperabilidade da linguagem C (descrito em detalhes e com instruções para diferentes plataformas no site oficial do Flutter); Além disso, o som null-safety foi adicionado ao canal de lançamento estável do Dart.

null-safety

A maior mudança que foi feita no Dart é a introdução da null-safety que está recebendo cada vez mais suporte de pacotes de terceiros, bem como das bibliotecas e pacotes desenvolvidos pelo Google.

A segurança nula traz otimizações do compilador e reduz a chance de erros de tempo de execução, portanto, mesmo que agora seja opcional suportá-la, é importante que você comece pelo menos a entender como tornar seu aplicativo nulo seguro.

No momento, porém, isso pode não ser uma opção para você, pois nem todos os pacotes Pub são totalmente seguros para nulos e isso significa que, se você precisar de um desses pacotes para seu aplicativo, não poderá aproveitar os benefícios do segurança nula.

Tornando seu aplicativo null-safe

Se você já trabalhou com Kotlin, a abordagem do Dart para a segurança nula será um pouco familiar para você. Dê uma olhada no guia oficial do Dart para um guia mais completo sobre a null-safety do Dart.

Todos os tipos com os quais você está familiarizado ( String , int , Object , List , suas próprias classes etc.) agora são não anuláveis: seu valor nunca pode ser null .

Isso significa que uma função que tem um tipo de retorno não anulável deve sempre retornar um valor , ou então você receberá um erro de compilação e sempre terá que inicializar variáveis ​​não anuláveis, a menos que seja uma variável local que recebe um valor antes é sempre usado.

Se você deseja que uma variável seja anulável, você precisa adicionar um ponto de interrogação ao final do nome do tipo, por exemplo, ao declarar um inteiro como este:

 int? a = 1

A qualquer momento, você pode defini-lo como null e o compilador não chorará por isso.

Agora, e se você tiver um valor anulável e usá-lo para algo que requer um valor não anulável? Para fazer isso, você pode simplesmente verificar se não é nulo:

 void function(int? a) { if(a != null) { // a is an int here } }

Se você sabe com 100% de certeza que uma variável existe e não é nula, basta usar o ! operador, assim:

 String unSafeCode(String? s) => s!;

Tirando conclusões: o que podemos fazer com o Flutter 2?

À medida que o Flutter continua evoluindo, há mais e mais coisas que podemos fazer com ele, mas ainda não é razoável dizer que o Flutter pode ser usado para qualquer projeto de desenvolvimento de aplicativos de qualquer tipo.

No lado móvel, é improvável que você encontre algo em que o Flutter não seja bom porque é suportado desde o início e foi polido. A maioria das coisas que você vai precisar já está lá.

Por outro lado, a web e o desktop ainda não chegaram lá.

A área de trabalho ainda tem um pouco de bugs e os aplicativos do Windows (que são uma parte importante do desenvolvimento da área de trabalho) ainda exigem muito trabalho antes de ficarem bons. A situação é melhor no Linux e no macOS apenas até certo ponto.

A web está em um lugar muito melhor do que o desktop . Você pode criar aplicativos da Web decentes, mas ainda está limitado a aplicativos de página única e aplicativos da Web progressivos. Ainda não queremos usá-lo para aplicativos centrados em conteúdo, onde a indexação e o SEO são necessários.

Aplicativos centrados em conteúdo provavelmente não serão tão bons porque a seleção de texto ainda não é de primeira, como vimos na seção sobre o estado atual do Flutter para a web.

Se você precisar da versão web do seu aplicativo Flutter, o Flutter para a web provavelmente ficará bem, especialmente porque já existe uma grande quantidade de pacotes compatíveis com a web e a lista está sempre crescendo.

Recursos adicionais

• Keynote (Flutter Engage), YouTube
• O que há de novo no Flutter 2, Flutter, Medium
• Entendendo null safety , Dart.dev
• Desenvolvimento Web e Desktop Responsivo com Flutter, Smashing Magazine
• Resolvendo problemas comuns de plataforma cruzada ao trabalhar com Flutter, Smashing Magazine