O que é Leading no Flutter e como personalizar o AppBar com exemplos práticos

O que é Leading no Flutter e como personalizar o AppBar com exemplos práticos

Se você está começando a desenvolver aplicativos com Flutter, provavelmente já usou o widget AppBar para dar título às suas telas. Ele é um dos componentes mais comuns da interface de um app, sendo responsável pela barra superior que geralmente contém o título da página, botões de ação e ícones de navegação.

Mas você sabia que é possível personalizar o canto esquerdo da AppBar e substituir o botão de voltar padrão por qualquer outro widget? É justamente aí que entra o parâmetro leading.

Neste artigo, você vai aprender:

  • O que é o leading no Flutter.
  • Como ele funciona no AppBar.
  • Exemplos práticos de personalização com ícones, imagens e botões.
  • Relação com outros parâmetros importantes, como title e actions.
  • Boas práticas no uso do leading.

O que é o parâmetro leading no AppBar?

O leading é um parâmetro do widget AppBar que define o conteúdo exibido no canto esquerdo da barra superior.

Por padrão:

  • Se não houver nada definido, o Flutter coloca automaticamente um botão de voltar (seta) quando a tela atual não é a primeira do Navigator.
  • Se for a primeira tela da pilha de navegação, o leading fica vazio, a menos que você o personalize.

Ou seja, o leading é útil para exibir elementos como botão de menu, logo, avatar do usuário ou qualquer outro widget que você precise no lado esquerdo da AppBar.

Exemplo simples de uso do leading


AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {
      print('Menu pressionado!');
    },
  ),
  title: Text('Minha Home'),
)

📌 Nesse código:

  • O leading foi definido como um IconButton.
  • O ícone exibido é o Icons.menu.
  • Ao clicar, a função onPressed é chamada.

Resultado: um ícone de menu no canto esquerdo, no lugar do botão voltar.

Personalizando o leading com outros widgets

O leading não precisa ser apenas um ícone. Ele pode receber qualquer widget, o que abre espaço para muita criatividade.

Exemplo 1 – Logo do app


AppBar(
  leading: Image.asset('assets/logo.png'),
  title: Text('Meu App'),
)

Exemplo 2 – Avatar do usuário


AppBar(
  leading: CircleAvatar(
    backgroundImage: AssetImage('assets/images/perfil.png'),
  ),
  title: Text('Perfil do Usuário'),
)

Exemplo 3 – Botão com texto


AppBar(
  leading: TextButton(
    onPressed: () => print('Ajuda'),
    child: Text('Ajuda'),
  ),
  title: Text('Suporte'),
)

Com isso, você pode usar o espaço do leading para transmitir identidade visual (logo), informações úteis (nome do usuário) ou até atalhos de navegação.

Leading e outros parâmetros do AppBar

Para aproveitar ao máximo o AppBar, é importante entender como o leading se relaciona com outros parâmetros:

  • title → Define o título principal da tela.
  • actions → Conjunto de widgets exibidos no canto direito da AppBar. Geralmente usado para ícones de pesquisa, notificações e configurações.
  • centerTitle → Controla se o título fica centralizado (padrão no iOS) ou alinhado à esquerda (padrão no Android).
  • flexibleSpace → Permite criar personalizações avançadas, como gradientes e imagens de fundo.

Exemplo completo


AppBar(
  leading: Icon(Icons.arrow_back),
  title: Text('Página de Produtos'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        print('Buscar produto');
      },
    ),
    IconButton(
      icon: Icon(Icons.shopping_cart),
      onPressed: () {
        print('Abrir carrinho');
      },
    ),
  ],
)

📌 Nesse exemplo:

  • O leading exibe uma seta para voltar.
  • O title mostra o título da página.
  • O actions adiciona dois ícones no lado direito: pesquisa e carrinho.

Boas práticas ao usar o leading

  • ✅ Consistência: use sempre ícones ou widgets que façam sentido para o usuário.
  • ✅ Simplicidade: evite sobrecarregar a AppBar com elementos desnecessários.
  • ✅ Acessibilidade: adicione tooltip nos botões para leitores de tela.
  • ✅ Padrões visuais: siga os guidelines de design do Material Design para manter uma interface familiar.

Exemplo com acessibilidade


AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    tooltip: 'Abrir menu',
    onPressed: () {},
  ),
  title: Text('App com Acessibilidade'),
)

Conclusão

O parâmetro leading no Flutter é uma forma simples e poderosa de personalizar o lado esquerdo da AppBar. Ele permite substituir o botão de voltar padrão por qualquer widget, como ícones, imagens ou até botões de texto.

Ao combiná-lo com outros parâmetros como title e actions, você consegue criar barras superiores muito mais completas e profissionais.

👉 Agora é a sua vez: experimente diferentes personalizações no seu projeto Flutter e descubra como deixar sua AppBar mais funcional e com a cara do seu aplicativo!

Palavras-chave: leading no Flutter, AppBar Flutter, personalizar AppBar Flutter, exemplo AppBar com leading, Flutter iniciante.

Comentários

Postar um comentário