Flutter — conceitos-chave, arquitetura e widgets

O que é Flutter

Flutter é um SDK (Kit de Desenvolvimento de Software) e framework para criar interfaces de usuário, anunciado pelo Google em 2015. A primeira versão estável do Flutter 1.0 foi lançada em dezembro de 2018. Ao contrário do React Native, o Flutter não usa uma ponte entre JavaScript e código nativo — ele compila diretamente para instruções nativas do processador.

A principal característica do Flutter é seu próprio mecanismo de renderização. O framework não depende do UIKit (iOS) nem do sistema View do Android. Em vez disso, o Flutter desenha cada pixel independentemente através do Skia (antes de 2024) ou do novo mecanismo Impeller. Isso garante uma aparência consistente em todas as plataformas e elimina problemas de adaptação entre diferentes versões do SO.

De acordo com Statista 2024, o Flutter ocupa o primeiro lugar entre os frameworks multiplataforma em popularidade: cerca de 46% dos desenvolvedores o usam para desenvolvimento móvel. O framework é usado em projetos do Google Pay, Alibaba, eBay, BMW e Tencent.

História e versões do Flutter

A primeira versão alpha do Flutter foi apresentada no Dart Developer Summit em 2015 sob o nome Sky. Em 2018, o Flutter 1.0 foi lançado com suporte apenas para iOS e Android. O Flutter 2.0 (2021) adicionou suporte para Web e Desktop. O Flutter 3.0 (2022) introduziu suporte estável para macOS e Linux. O Flutter 3.16 (2023) apresentou o Impeller — um novo mecanismo de renderização baseado em Metal e Vulkan.

Flutter 3.22 (2024) inclui o Impeller por padrão no iOS, suporte aprimorado ao Material Design 3, Dart 3.4 com extensões de macro e suporte integrado a Native Assets para acesso direto a recursos da plataforma. O Google relata que o Impeller reduz travamentos de quadros em 90% em comparação com o Skia.

A linguagem Dart

Dart é uma linguagem de programação criada pelo Google em 2011 e usada no Flutter. Dart combina tipagem estrita com recursos de compilação JIT (para Hot Reload) e compilação AOT (para builds de produção). O Dart 3.0 (2023) introduziu pattern matching, classes seladas e records como recursos estáveis.

Null safety no Dart é um recurso obrigatório introduzido desde a versão 2.12. O compilador verifica todos os tipos anuláveis em tempo de compilação, eliminando NullPointerException em tempo de execução. Os tipos de dados (int, String, bool) são não anuláveis por padrão, e valores anuláveis usam o sufixo ? (por exemplo, String? name).

Arquitetura do Flutter

A arquitetura do Flutter é construída em um princípio de três camadas. A camada inferior é o mecanismo (C/C++), responsável pela renderização, E/S e acesso às APIs da plataforma. A camada intermediária é o framework (Dart), que implementa o sistema de widgets, gestos, animações e navegação. A camada superior é o aplicativo (Dart), que monta os widgets em uma árvore.

Widgets e a árvore de widgets

No Flutter, tudo é um widget. Os widgets são de dois tipos: StatelessWidget (imutável, não armazena estado) e StatefulWidget (mutável, gerencia estado através de State). A árvore de widgets (Widget Tree) é uma estrutura hierárquica onde cada widget filho está aninhado dentro de um pai. Scaffold, AppBar, Container, Text, Column, Row — estes são os blocos de construção básicos.

BuildContext é um objeto que comunica a posição do widget na árvore. MediaQuery.of(context) obtém as dimensões da tela, Theme.of(context) obtém o tema atual. BuildContext é usado para navegação (Navigator.of(context)), acesso a InheritedWidget e tradução de localidade via Localizations.of.

O mecanismo Impeller

Impeller é o mecanismo de renderização moderno do Flutter, escrito em C++ e usando Metal (iOS/macOS) e Vulkan (Android). Ao contrário do Skia, que redesenhava cada quadro do zero, o Impeller compila os shaders antecipadamente e os armazena em cache. Isso elimina atrasos durante a renderização inicial de cenas complexas e reduz a carga da GPU.

Testes da equipe Google Flutter mostram que o Impeller reduz o tempo de compilação de shaders de 200–500 ms (Skia) para 1–3 ms. No iPhone 13 Pro, a renderização por impulso do Impeller atinge 120 FPS sem quedas de quadros. No Android com Vulkan, oferece 60 FPS estáveis mesmo em dispositivos de gama média (Xiaomi Redmi Note 12).

Exemplo de aplicativo Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Aplicativo Flutter')),
        body: const Center(
          child: Text('Olá, Flutter!'),
        ),
      ),
    );
  }
}

Vantagens do Flutter

Base de código única — a principal vantagem do Flutter. Um projeto Dart compila para iOS, Android, Web, Windows, macOS e Linux. De acordo com o Google, isso reduz o tempo de desenvolvimento em 30–50% em comparação com projetos iOS e Android separados. A Alibaba reduziu o tempo de lançamento de versões em 30% após migrar para o Flutter.

Desempenho do Flutter é próximo ao nativo. A compilação AOT do Dart para código de máquina ARM e x86_64 elimina atrasos de interpretação. O mecanismo Impeller garante 60 FPS mesmo em dispositivos de 2018 (iPhone XR, Samsung Galaxy S9). De acordo com o Google, 99,5% dos quadros em aplicativos Flutter são renderizados sem travamentos.

Hot Reload — tecnologia de atualização instantânea de código. O desenvolvedor altera o código fonte, salva o arquivo, e o Flutter reconstrói a árvore de widgets em 300–800 ms sem perder o estado atual do aplicativo. Isso acelera iterações de design de UI: é possível alterar margens, cores e animações em segundos sem esperar por uma reconstrução completa.

Material Design 3 e a linguagem de design nativa Cupertino (estilo iOS) estão incluídos no pacote padrão do Flutter. Os widgets do Material 3 suportam cores dinâmicas (Material You), layout responsivo e animações de transição de tela. CupertinoPageTransition e CupertinoNavigationBar imitam o comportamento do navegador nativo do iOS.

Customização de widgets não requer criar Views personalizadas em cada plataforma. Basta sobrescrever build() e retornar um novo widget. Os pacotes de animação (AnimatedContainer, Hero, TweenAnimationBuilder) e gestos (GestureDetector, Dismissible) cobrem 95% dos cenários de animação de UI sem escrever código de plataforma.

Ecossistema e pacotes do Flutter

pub.dev é o registro oficial de pacotes para Dart e Flutter. Em julho de 2024, mais de 45.000 pacotes estão publicados no registro. A instalação de um pacote é feita com o comando flutter pub add <nome_do_pacote>. O Pub resolve automaticamente as dependências, verifica a compatibilidade de versões e gera pubspec.lock.

O gerenciamento de estado no Flutter é um dos principais desafios arquitetônicos. Além do flutter_bloc, as soluções populares incluem: Provider (recomendado pelo Google, usa InheritedWidget), Riverpod (uma versão reprojetada do Provider com segurança em tempo de compilação) e GetX (tudo-em-um: estado, roteamento, DI). O Provider continua sendo o mais simples para começar: ChangeNotifierProvider envolve o modelo, e Consumer reconstrói o widget quando os dados mudam.

Os testes no Flutter são suportados em três níveis. Testes unitários (flutter test) verificam funções e classes sem UI. Testes de widget (testWidgets) renderizam widgets individuais em um ambiente isolado. Testes de integração (IntegrationTest) executam o aplicativo completo em um dispositivo ou simulador. O Flutter 3.22 adicionou suporte para testes de patch através de análises de patch e relatórios aprimorados de cobertura de código.

Pacotes populares

dio é um cliente HTTP com suporte para interceptadores, timeouts e FormData. Usado em 40% dos projetos Flutter no GitHub. O Dio suporta interceptação de requisições para logging, tentativas e adição de tokens de autorização. A segunda biblioteca mais popular é o retrofit, que gera clientes de API tipados.

flutter_bloc é uma biblioteca de gerenciamento de estado baseada no padrão BLoC (Business Logic Component). BlocProvider passa estados para baixo na árvore de widgets, BlocBuilder reconstrói a UI quando o estado muda, e BlocListener lida com efeitos colaterais (navegação, SnackBar). Cubit é uma versão simplificada do BLoC sem eventos.

go_router é navegação declarativa para Flutter pelo Google. As rotas são descritas na configuração do GoRouter com suporte para rotas aninhadas, redirecionamentos e deep links. ShellRoute divide a navegação entre as abas do BottomNavigationBar. GoRouter 14.0 suporta caminhos type-safe e StatefulShellRoute com preservação de estado de abas.