AppBar — o que é, configuração e widgets Flutter

O que é AppBar no Flutter

AppBar é um componente Material padrão de painel superior que aparece no topo de um Scaffold. Ele contém o título da tela, um botão de navegação (geralmente um ícone de “hambúrguer” ou seta “Voltar”) e ações — ícones que abrem pesquisa, configurações ou outras funções. O AppBar se adapta automaticamente à plataforma: no Android usa a sombra inferior padrão do Material, no iOS — um design mais plano com transparência.

O AppBar implementa a interface PreferredSizeWidget, o que significa que sua altura é fixa e conhecida antes da construção. Por padrão, a altura do AppBar é de 56dp no Android e 44dp no iOS em orientação retrato, levando em conta o SafeArea no topo. Esse recurso permite que o Scaffold calcule o espaço disponível para o body antecipadamente, evitando recomposição durante a renderização.

De acordo com Flutter Material Library Guide (2026), o AppBar passou por várias iterações: no Flutter 1.x era um contêiner simples com texto, no Flutter 2.x ganhou suporte para Material 3 e flexibleSpace, e no Flutter 3.x — integração com System UI (cor da barra de status, transparência). O AppBar moderno suporta Dynamic Color do Material You em dispositivos Android 12+.

Estrutura do AppBar: propriedades e parâmetros

AppBar fornece um conjunto de parâmetros que controlam cada parte do painel superior. Compreender essas propriedades permite personalizar o painel de forma flexível para qualquer requisito de design sem criar soluções personalizadas.

Title e leading: configuração do título e navegação

A propriedade title aceita qualquer widget, mas o mais comum é usar Text com configuração de estilo via TextStyle. Para títulos longos, recomenda-se envolver title em Flexible para que o texto seja truncado corretamente quando faltar espaço. A propriedade leading é automaticamente substituída por BackButton ao navegar para uma tela aninhada via Navigator.push, se não for definida explicitamente.

Actions: posicionamento de ícones de ação

A lista actions contém widgets alinhados à borda direita do AppBar. Cada elemento não deve ter mais de 48dp de largura (padrão Material Design). Para agrupar ações, use PopupMenuButton — isso oculta opções menos importantes em um menu suspenso e segue as recomendações do Material sobre densidade de interface.

Personalização do AppBar: estilos, cores e comportamento

AppBar suporta personalização profunda através de propriedades de cor, sombra e preenchimento. O estilo básico é herdado do tema do aplicativo, mas cada propriedade pode ser substituída individualmente. Vamos analisar os principais cenários de configuração.

A cor de fundo do AppBar é definida através de backgroundColor. Se não for especificada, usa-se appBarTheme do ThemeData. No Material 3, a cor do AppBar é calculada automaticamente a partir de ColorScheme.primary, mas pode ser substituída para uma tela específica. Para um AppBar transparente (frequentemente usado em perfis), defina backgroundColor: Colors.transparent com elevation: 0.

A propriedade elevation controla a sombra sob o AppBar. O valor 0 remove a sombra, criando um efeito de painel “plano”, relevante para Material 3. O valor 4 dá a sombra padrão do Material Design. Para controle personalizado da sombra, use shadowColor — a cor da sombra que separa visualmente o painel do conteúdo.

Para controlar a cor do texto no AppBar, use foregroundColor. Essa propriedade afeta a cor do título, ícones e texto em actions. Ao alterar backgroundColor, um foregroundColor contrastante é automaticamente selecionado, mas pode ser forçado para designs não padronizados.

SliverAppBar: versão animada do AppBar

SliverAppBar é uma extensão do AppBar para uso dentro de CustomScrollView que suporta animação ao rolar: recolhimento, efeito parallax e fixação. Diferente de um AppBar padrão, SliverAppBar é um widget sliver e pode mudar de tamanho dinamicamente conforme a posição de rolagem.

Os modos principais do SliverAppBar são determinados por uma combinação das propriedades pinned, floating e snap. No modo pinned, o painel permanece sempre visível no topo da tela. No modo floating, ele aparece ao rolar para trás. A combinação floating + snap cria um comportamento de painel “pegajoso” que aparece ao mínimo deslocamento para cima, frequentemente usado em feeds de notícias.

De acordo com Flutter API SliverAppBar (2026), para usar SliverAppBar é necessário substituir um ListView ou Column comum por CustomScrollView contendo widgets sliver. O Scaffold continua funcionando corretamente, mas a propriedade appBar do Scaffold deve ser null — o SliverAppBar é colocado dentro do CustomScrollView como o primeiro sliver.

Exemplo de configuração do AppBar em um aplicativo

Vejamos um exemplo de AppBar com pesquisa, menu suspenso e TabBar. Este código demonstra uma configuração típica do painel superior em um aplicativo de produção em Flutter.

Scaffold(
  appBar: AppBar(
    title: const Text('Catálogo'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Configurações')),
          const PopupMenuItem(value: 'about', child: Text('Sobre o App')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

No exemplo, o AppBar contém um título centralizado, um botão para abrir Drawer à esquerda, um ícone de pesquisa e um menu suspenso à direita. O TabBar na parte inferior permite alternar entre categorias de produtos. Essa configuração cobre a maioria dos cenários de aplicativos móveis: navegação, pesquisa, opções adicionais e alternância de seções — tudo em um único painel superior.