Widget — o que é, tipos e composição no Flutter

O que é um Widget no Flutter

Um Widget no Flutter é uma descrição imutável (immutable) de uma parte da interface do usuário. Cada Widget contém propriedades de configuração: tamanho, cor, posição, texto, manipuladores de eventos e Widgets filhos. Os Widgets não são renderizados diretamente — são plantas (blueprints) a partir das quais o Flutter Engine cria um RenderObject, o objeto gráfico real na tela.

A filosofia do Flutter afirma: “Everything is a Widget”. Isso significa que não apenas os elementos visíveis (Text, Image, Button) são Widgets, mas também os blocos estruturais (Padding, Center, Column, Stack), blocos comportamentais (GestureDetector, AnimatedBuilder) e até mesmo o próprio aplicativo (MaterialApp, CupertinoApp). Essa abordagem garante uniformidade: qualquer elemento da tela pode ser combinado com qualquer outro através de simples aninhamento.

De acordo com o Google I/O 2024 — Flutter Widgets Deep Dive, o aplicativo médio no Flutter contém entre 200 e 1500 Widgets a qualquer momento. Apesar dessa quantidade, o Flutter mantém 60 FPS mesmo em dispositivos de baixo custo graças a otimizações no nível do mecanismo C++ Skia/Impeller. Widgets são objetos leves (40–80 bytes cada), portanto sua criação não é um gargalo de desempenho.

import 'package:flutter/material.dart';

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

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

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

As Três Árvores do Flutter: Widget, Element e RenderObject

Para entender como Widget funciona, é preciso compreender a arquitetura do Flutter, que consiste em três árvores interconectadas. A primeira — Widget tree — descreve a configuração da UI. É uma árvore leve que pode ser completamente reconstruída a cada quadro (o coletor de lixo remove Widgets antigos e cria novos). Widgets são imutáveis: se a cor do texto mudar, um novo Widget Text com a nova cor é criado, o antigo é descartado.

A segunda árvore — Element tree — é o elo entre Widget e RenderObject. Element contém uma referência ao Widget (configuração) e ao RenderObject (renderização). Quando um Widget muda, o Flutter compara o novo Widget com o Element antigo e decide: atualizar o RenderObject existente (se o Widget for do mesmo tipo) ou criar um novo (se o tipo do Widget mudou). Esse processo é chamado de Reconciliation e é análogo ao Virtual DOM do React.

A terceira árvore — RenderObject tree — é responsável pela renderização real na tela. RenderObject contém tamanhos, posições e métodos de pintura específicos. O Flutter Engine (C++ Skia ou Impeller) percorre a árvore RenderObject e renderiza cada nó. A árvore RenderObject é a mais pesada, então o Flutter minimiza suas alterações reutilizando RenderObjects ao alternar para Widgets do mesmo tipo.

StatelessWidget vs StatefulWidget

Flutter divide os Widgets em dois tipos fundamentais: StatelessWidget e StatefulWidget. StatelessWidget é um widget que não contém estado mutável. A aparência de um StatelessWidget é completamente determinada por seu construtor e não pode mudar após a renderização. Exemplos: Text, Icon, Divider, Padding. Todas as propriedades de um StatelessWidget são declaradas como final no construtor e são somente leitura.

Um StatefulWidget é um widget com estado mutável. Consiste em duas classes: o Widget em si (configuração imutável, como StatelessWidget) e State (estado mutável). Separar Widget de State é uma decisão arquitetônica chave no Flutter. O Widget é recriado a cada build, mas o objeto State continua existindo durante todo o ciclo de vida do widget na árvore, preservando seu estado.

Quando setState() é chamado, o Flutter marca o State como “ sujo” e no próximo quadro chama o método build() para reconstruir a subárvore. Importante: setState() não recria o Widget em si — ele apenas aciona a chamada build() no State existente. Isso significa que StatefulWidget pode atualizar a UI sem perder o estado dos Widgets filhos, desde que as chaves (Key) dos elementos filhos permaneçam estáveis.

// StatelessWidget — aparência nunca muda
class GreetingWidget extends StatelessWidget {
  const GreetingWidget({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Text('Olá, $name');
  }
}

// StatefulWidget — contador com estado mutável
class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Contagem: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Incrementar'),
        ),
      ],
    );
  }
}

Tipos de Widget: layout, painting, interactive

Todos os Widgets no Flutter podem ser divididos em três categorias principais por propósito funcional. Layout Widgets — responsáveis pelo posicionamento dos elementos filhos na tela. Row e Column organizam filhos em linha, Stack coloca um sobre o outro, Expanded e Flexible distribuem o espaço disponível. Layout Widgets não têm representação visual própria — eles gerenciam a posição e o tamanho dos widgets filhos.

Painting Widgets — responsáveis pelo estilo visual. Container combina decorações (cor, gradiente, sombra, borda) com propriedades de layout. Padding adiciona espaçamento, DecoratedBox desenha um fundo, Transform aplica transformações (rotação, escala). Painting Widgets são os blocos de construção do estilo visual e são frequentemente usados em conjunto com Layout Widgets para alcançar a aparência desejada.

Interactive Widgets — lidam com a entrada do usuário. GestureDetector detecta gestos (toque, deslizar, pinça), InkWell adiciona efeito ripple do Material, TextField aceita entrada de texto, Slider e Switch fornecem elementos de controle padrão. Interactive Widgets levantam eventos através de funções callback que são passadas ao construtor ou tratadas através de provedores de estado.

De acordo com o Flutter Widget of the Week (Google, 2025), a comunidade Flutter usa ativamente a combinação de layout + painting + interactive Widgets para construir praticamente qualquer interface. Por exemplo, um botão: InkWell (interactive) + Container (painting) + Text (static) + Padding (layout). Essa modularidade permite reutilizar blocos padrão em diferentes contextos sem duplicação de código.

Composição de Widgets e BuildContext

Composição de Widgets é o processo de construir a UI aninhando alguns Widgets dentro de outros. Diferente da herança clássica (extends), onde uma classe filha herda o comportamento do pai, Flutter usa agregação: cada Widget contém outros Widgets através do parâmetro child (para um) ou children (para vários). Essa abordagem proporciona maior flexibilidade e reutilização.

BuildContext é o segundo conceito mais importante depois de Widget. BuildContext é um descritor da posição de um Widget na árvore de elementos. Através do BuildContext, um Widget pode acessar widgets ancestrais (Theme.of(context), MediaQuery.of(context), Navigator.of(context)). BuildContext é passado para o método build() e é usado para interagir com elementos pais e filhos. Cada Widget tem exatamente um BuildContext, que identifica unicamente sua posição na árvore.

De acordo com a Visão Geral Arquitetônica do Flutter (Google, 2025), BuildContext é a base do InheritedWidget — um mecanismo que permite passar dados para baixo na árvore sem passagem explícita através de construtores. Theme, MediaQuery, Navigator e Provider usam InheritedWidget internamente. Qualquer Widget profundamente aninhado pode acessar dados de um ancestral através de BuildContext.dependOnInheritedWidgetOfExactType, tornando o BuildContext a chave para a arquitetura reativa do Flutter.

// Composição de widgets via aninhamento
Scaffold(
  appBar: AppBar(title: const Text('Meu App')),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Bem-vindo ao Flutter',
          style: TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: () { /* nav */ },
          child: const Text('Começar'),
        ),
      ],
    ),
  ),
)

// Acessar temas via BuildContext
Text(
  'Texto Estilizado',
  style: Theme.of(context).textTheme.headlineMedium,
)

Erros Comuns com Widgets

O primeiro e mais comum erro é usar StatefulWidget onde StatelessWidget é suficiente. Muitos desenvolvedores Flutter iniciantes criam StatefulWidget para todos os widgets, mesmo quando o estado é armazenado em um provedor externo (Provider, Riverpod, BLoC). Isso é excessivo e prejudica o desempenho. Regra: use StatelessWidget se o estado for gerenciado externamente ou se o widget não tiver seu próprio estado mutável.

O segundo erro é criar Widgets dentro do método build sem um construtor const. Cada Widget criado sem const é realocado a cada build. Se você criar Widgets com construtor const dentro de build(), o Flutter pode reutilizar a mesma instância, reduzindo a carga do coletor de lixo. Adicione const sempre que possível — especialmente para Text, Icon, SizedBox, Padding e outros Widgets stateless.

O terceiro erro é trabalho incorreto com chaves (Key). Flutter usa Key para identificar Widgets ao reconstruir a árvore. Se uma lista de Widgets for reconstruída sem Keys, o Flutter pode confundir a ordem dos elementos, levando a animações incorretas ou perda de estado. Sempre adicione uma Key (por exemplo, ValueKey ou ObjectKey) para elementos em listas, especialmente ao usar ListView.builder com dados dinâmicos.