A versão 2.2 do Flutter já está disponível! Para obter a atualização, basta mudar para o canal estável e atualizar sua instalação do Flutter, ou começar com uma nova instalação seguindo as instruções em flutter.cn/docs/get-started.
Embora tenha sido lançada poucos meses após a versão 2.0, a 2.2 traz uma série de aprimoramentos significativos. Esta versão consolidou 2.456 Pull Requests (PRs) e resolveu 3.105 problemas em todo o framework, engine e bibliotecas de plugins. Gostaríamos de agradecer à comunidade Flutter por suas numerosas contribuições de PRs e revisões, incluindo Abhishek01039, que contribuiu com 17 PRs, e xu-baolin, com 9 revisões de PR. Seu apoio foi fundamental para o lançamento bem-sucedido do Flutter 2.2.
Cada nova versão estável do Flutter introduz melhorias de desempenho, novas funcionalidades e correções de bugs, além de apresentar recursos experimentais para validação em produção. Seu feedback é crucial para garantir que essas funcionalidades atendam às suas necessidades. Além disso, novas versões frequentemente incluem atualizações de ferramentas e contribuições da comunidade.
Principais Atualizações do Flutter 2.2
A versão 2.2 baseia-se nos avanços do Flutter 2, oferecendo melhorias para Android, iOS e web. Destaques incluem novos ícones Material, aprimoramentos no processamento de texto, mudanças no comportamento de rolagem, suporte a cursor de mouse para TextSpan e novas diretrizes para criar aplicativos multiplataforma adaptáveis. Todas essas funcionalidades agora estão estáveis e prontas para uso em produção, construídas sobre a nova versão do Dart.
Dart 2.13
Acompanhando o Flutter 2.2, o Dart 2.13 foi lançado com novos recursos, como os type aliases. Eles permitem criar aliases para tipos, similarmente a como já era possível para funções:
// Alias para funções (existente)
typedef ValueChanged<t> = void Function(T value);
// Alias para classes (novo!)
typedef StringList = List<string>;
// Renomear classes de forma não disruptiva (novo!)
@Deprecated("Use NewClassName instead")
typedef OldClassName<t> = NewClassName<t>;
</t></t></string></t>
Type aliases facilitam a atribuição de nomes curtos e descritivos a tipos complexos e permitem renomear classes sem quebrar o código existente. O Dart 2.13 também contém outras atualizações detalhadas em nosso post anterior sobre o lançamento do Dart 2.13.
Atualizações do Flutter para Web
Como a plataforma mais recente adicionada ao Flutter estável, a web recebeu várias melhorias. O comportamento de cache foi otimizado com um novo mecanismo de carregamento de service worker, resolvendo o problema de download duplicado de main.dart.js. Anteriormente, atualizações em segundo plano exigiam múltiplos refrescos do navegador para serem visíveis. Agora, o usuário aguarda o download da atualização e ela é aplicada automaticamente.
Para habilitar essa mudança, regenere o arquivo index.html do seu aplicativo Flutter executando flutter create . no diretório do projeto após salvar suas modificações e excluir o index.html existente.
Ambos os renderizadores web foram aprimorados. O renderizador HTML agora suporta características de fontes (font features) para configurações de FontFeature e renderização de texto via Canvas API. Tanto o renderizador HTML quanto o CanvasKit agora suportam máscaras de shader (shader masks) e computeLineMetrics, unificando o comportamento entre web e mobile. Desenvolvedores podem usar máscaras de opacidade para transições de fade e computeLineMetrics como em aplicativos móveis.
Acessibilidade é um foco chave no Flutter web. Em aplicativos web, uma árvore DOM paralela à árvore RenderObject é gerada, convertendo atributos semânticos em ARIA. O posicionamento de nós semânticos foi aprimorado para corrigir inconsistências com transformações em aplicativos móveis e web, garantindo que caixas de foco apareçam corretamente sobre os elementos. Um vídeo de Victor Tsaran demonstra o uso do VoiceOver no Flutter Gallery App.
Um flag de linha de comando para os modos profile e release agora permite o acesso à árvore de depuração de nós semânticos, visualizando os nós criados para a aplicação web e auxiliando na depuração de acessibilidade. Para habilitar:
$ flutter run -d chrome --profile \
--dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true
Ao ativar este flag, os nós semânticos serão visíveis sobre os widgets, facilitando a verificação de seu posicionamento. Relate quaisquer problemas encontrados.
Novos recursos em desenvolvimento incluem uma API para habilitar programaticamente a acessibilidade e melhorias no uso da tecla Tab com leitores de tela. O Flutter DevTools agora também oferece um explorador de layout para aplicativos web.
Transições de Página e Instalação Incremental no iOS
No iOS, o tempo de renderização de frames animados foi reduzido em 75%, resultando em transições de página mais fluidas no tema Cupertino, com melhorias ainda maiores em dispositivos de baixo desempenho. A instalação incremental de aplicativos iOS durante o desenvolvimento agora reduz o tempo de atualização em 40%, acelerando os ciclos de teste.
Criando Aplicativos Adaptáveis a Plataforma com Flutter
Com o suporte crescente a novas plataformas, o Flutter incentiva o design de aplicativos que se adaptam a diferentes tipos de dispositivos, métodos de entrada (toque vs. teclado/mouse) e convenções de uso de plataforma. Essa adaptabilidade é crucial para uma experiência de usuário ideal.
Vídeos e guias de documentação estão disponíveis para auxiliar na criação de aplicativos adaptáveis. Exemplos notáveis como Flokk e Flutter Folio, desenvolvidos pela gSkinner, demonstram estas práticas. A recente atualização do Material Design para telas grandes também fornece diretrizes atualizadas para design de interface.
O objetivo do Flutter é permitir que os aplicativos não apenas funcionem em múltiplas plataformas, mas que se adaptem elegantemente a diferentes tamanhos de tela, métodos de entrada e hábitos de uso.
Mais Ícones Material
Esta versão adiciona mais ícones Material, incluindo um para o mascote Dash. O número total de ícones Material disponíveis agora ultrapassa 7.000. Ícones podem ser pesquisados e visualizados em fonts.google.com/icons.
Melhorias no Processamento de Texto
A refatoração no processamento de entrada de texto permite o cancelamento de eventos de teclado na árvore de widgets e a personalização completa de ações de texto. Isso melhora a experiência do usuário, evitando comportamentos indesejados como rolagem ao pressionar a barra de espaço ou teclas de seta, e permite a navegação por Tab entre campos de texto e botões.
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: 'Flutter Text Editing Fun',
home: HomePage(),
);
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
body: Column(
children: [
TextField(),
OutlinedButton(onPressed: () {}, child: const Text('Press Me')),
],
),
);
}
A personalização de ações de texto permite, por exemplo, que a tecla Enter envie uma mensagem em um cliente de chat, enquanto Ctrl+Enter cria uma nova linha. O Flutter agora também alinha o comportamento de edição de texto com o sistema operacional host, como copiar texto usando Ctrl+C no Windows/Linux e Cmd+C no macOS.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: 'Flutter TextField Key Binding Demo',
home: Scaffold(body: UnforgivingTextField()),
);
}
/// A text field that clears itself if the user tries to back up or correct
/// something.
class UnforgivingTextField extends StatefulWidget {
@override
State<unforgivingtextfield> createState() => _UnforgivingTextFieldState();
}
class _UnforgivingTextFieldState extends State<unforgivingtextfield> {
// The text editing controller used to clear the text field.
late TextEditingController controller;
@override
void initState() {
super.initState();
controller = TextEditingController();
}
@override
Widget build(BuildContext context) => Shortcuts(
shortcuts: <logicalkeyset intent="">{
// This overrides the left arrow key binding that the text field normally
// has in order to move the cursor back by a character. The default is
// created by the MaterialApp, which has a DefaultTextEditingShortcuts
// widget in it.
LogicalKeySet(LogicalKeyboardKey.arrowLeft): const ClearIntent(),
// This binds the delete and backspace keys to also clear the text field.
// You can bind any key, not just those already bound in
// DefaultTextEditingShortcuts.
LogicalKeySet(LogicalKeyboardKey.delete): const ClearIntent(),
LogicalKeySet(LogicalKeyboardKey.backspace): const ClearIntent(),
},
child: Actions(
actions: <type action="">>{
// This binds the intent that indicates clearing a text field to the
// action that does the clearing.
ClearIntent: ClearAction(controller: controller),
},
child: Center(child: TextField(controller: controller)),
),
);
}
/// An intent that is bound to ClearAction.
class ClearIntent extends Intent {
const ClearIntent();
}
/// An action that is bound to ClearIntent that clears the TextEditingController
/// passed to it.
class ClearAction extends Action<clearintent> {
ClearAction({required this.controller});
final TextEditingController controller;
@override
Object? invoke(covariant ClearIntent intent) {
controller.clear();
}
}
</clearintent></type></logicalkeyset></unforgivingtextfield></unforgivingtextfield>
O objetivo é que a edição de texto em aplicativos Flutter desktop seja indistinguível da de outros aplicativos nativos.
Comportamento Automático de Rolagem
As barras de rolagem agora se comportam de forma mais consistente entre as plataformas. Em dispositivos móveis, elas não são exibidas por padrão, enquanto em desktop, aparecem automaticamente quando o conteúdo excede o contêiner. O Flutter 2.2 adiciona automaticamente um Scrollbar quando necessário em ambas as plataformas.
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: 'Automatic Scrollbars',
home: HomePage(),
);
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
body: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) => Text('Item $index'),
),
);
}
É possível personalizar a aparência e o comportamento das barras de rolagem através de ScrollBarTheme ou ScrollBehavior. Consulte a documentação oficial do Flutter para mais detalhes sobre as novas práticas recomendadas.
Cursor do Mouse em TextSpan
Agora é possível adicionar cursores de mouse a TextSpan que possuam um GestureRecognizer. Isso significa que TextSpan com onTap, por exemplo, exibirá um cursor apropriado (como uma mãozinha), mesmo que o texto quebre para a próxima linha.
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart' as urlLauncher;
void main() => runApp(App());
class App extends StatelessWidget {
static const title = 'Flutter App';
@override
Widget build(BuildContext context) => MaterialApp(
title: title,
home: HomePage(),
);
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: Text(App.title)),
body: Center(
child: RichText(
text: TextSpan(
style: TextStyle(fontSize: 48),
children: [
TextSpan(
text: 'This is not a link, ',
style: TextStyle(color: Colors.black),
),
TextSpan(
text: 'but this is',
style: TextStyle(color: Colors.blue),
recognizer: TapGestureRecognizer()
..onTap = () {
urlLauncher.launch('https://flutter.dev');
},
),
],
),
),
),
);
}
Além disso, TextSpan agora suporta onEnter e onExit, aprimorando a experiência do usuário com interações mais esperadas.
Novos Recursos em Preview no Flutter 2.2
A versão 2.2 inclui novos recursos em preview, como melhorias no cache de shaders no iOS, suporte a componentes de carregamento lento (deferred components) no Android, atualizações para desktop e suporte a host Linux ARM64. Teste essas funcionalidades e reporte quaisquer problemas.
Melhorias na Compilação de Shaders no iOS
Para mitigar travamentos causados pela compilação de shaders em tempo real no iOS, o Flutter agora pré-compila shaders agrupados antes do primeiro frame. Isso melhora a performance em dispositivos que usam o backend Metal, embora gere um aumento no tamanho do aplicativo e na latência de inicialização.
Componentes de Carregamento Lento no Android (AOT)
No Android, aplicativos Flutter agora podem baixar módulos com código e recursos pré-compilados em tempo de execução usando os componentes de carregamento lento (deferred components) do Dart. Isso reduz significativamente o tamanho inicial de instalação do aplicativo, com exemplos mostrando reduções de até 46%.
Alpha do Flutter para Windows UWP
O suporte para Windows UWP agora está em alpha nos canais dev. Isso permite que aplicativos Flutter alcancem dispositivos como o Xbox. As configurações para habilitar este recurso e rodar aplicativos incluem a modificação dos canais e a configuração do firewall para localhost.
Suporte a Host Linux ARM64 Contribuído pela Sony
Uma contribuição significativa da comunidade permite a construção e execução de aplicativos Flutter em máquinas Linux ARM64.
Atualizações no Ecossistema e Ferramentas do Flutter
O ecossistema de pacotes e as ferramentas também receberam atualizações importantes. O conjunto de plugins FlutterFire para Firebase foi aprimorado e agora suporta o Firebase App Check.
Atualizações de Pacotes Flutter Favorite
Vinte e quatro novos pacotes foram adicionados à lista de Flutter Favorite, incluindo os pacotes FlutterFire, a suíte de pacotes "plus" da comunidade Flutter, googleapis, win32, Intl, characters, sentry e infinite\_scroll\_pagination/flutter\_native\_splash. Esses pacotes são compatíveis com null safety e suportam diversas plataformas.
Atualizações do FlutterFire e Firebase App Check
O FlutterFire, o conjunto de plugins para Firebase, foi significativamente melhorado pela equipe Invertase. Novas funcionalidades incluem API tipada para dados, suporte ao Firebase Local Emulator Suite e otimização de consultas com data bundles. O suporte ao Firebase App Check protege recursos backend contra abusos.
Atualizações do Flutter DevTools
O Flutter DevTools agora oferece melhorias no rastreamento de memória, permitindo a identificação da alocação de objetos e a injeção de informações personalizadas na linha do tempo. Um novo painel experimental para o pacote provider facilita a depuração e o teste de configurações.
Atualizações de Plugins IDE
As extensões do Flutter para Visual Studio Code e IntelliJ/Android Studio foram atualizadas com novas refatorações de código Dart (inline function, inline local variable) e a opção de exibir todas as pilhas de chamadas no console.
DartPad para Prática em Cursos
O DartPad introduziu uma nova interface passo a passo para facilitar a prática durante cursos e palestras, permitindo a criação de experiências de aprendizado interativas.
Foco na Comunidade: FlutterFlow
FlutterFlow é uma ferramenta de design e desenvolvimento de aplicativos "low-code" que permite criar interfaces de usuário visualmente, conectando-se diretamente ao Firebase.
Grandes Alterações com Impacto na Compatibilidade
As únicas alterações disruptivas nesta versão são a remoção dos componentes depreciados BinaryMessages e TypeMatcher.