Na última parte da nossa série, trabalhamos em ajustes importantes no aplicativo para melhorar a experiência do usuário.
Hoje, vamos fazer mais uma modificação visual: substituir o título do AppBar (title) por um logo carregado diretamente da internet.

Situação atual

Atualmente, nosso AppBar está assim:

appBar: AppBar(
  title: const Text('Últimos Posts'),
),

Esse código exibe um título simples em texto.
A ideia agora é trocar esse texto pelo logo oficial hospedado no nosso site:

Alterando o código

Podemos carregar a imagem no lugar do texto usando o Image.network.
O código atualizado ficará assim:

appBar: AppBar(
  backgroundColor: Theme.of(context).colorScheme.primary,
  foregroundColor: Colors.white,
  title: Image.network(
    'https://apsredes.org/wp-content/uploads/elementor/thumbs/APSREDES-LOGO-tranparente-po2d3x0ghm8fgtoyo6hyfuquhctgbyjzy186e8hx6c.png',
    height: 40, // Ajusta a altura do logo
    fit: BoxFit.contain, // Mantém a proporção original
  ),
  centerTitle: true, // Centraliza o logo no AppBar
),

Por que essas configurações são importantes?

• height: 40 → Impede que a imagem ocupe muito espaço vertical no AppBar.
• fit: BoxFit.contain → Garante que a proporção original da imagem seja mantida, sem distorções.
• centerTitle: true → Centraliza o logo na barra superior, deixando o layout mais alinhado.

Considerações sobre carregamento de imagens

Como a imagem está hospedada externamente, o Flutter a carregará via HTTP.
Isso significa que, se a conexão estiver lenta, ela pode demorar um pouco para aparecer.
Para resolver isso, podemos implementar:

• Placeholder → Uma imagem ou widget temporário exibido enquanto o logo carrega.
• Cache → Para evitar o recarregamento da imagem a cada vez que a tela é aberta.