🧭 Título e accións na barra superior

A AppBar pode incluír tres zonas:

• leading: un widget á esquerda.
• title: o título.
• actions: unha lista de widgets á dereita, normalmente botóns con iconas.

⚙️ Propiedades habituais

Se hai un drawer, Flutter pode mostrar o botón de menú. Se podemos volver á pantalla anterior, pode mostrar unha frecha. Nunha pantalla inicial sen menú nin ruta anterior non ten por que aparecer ningún botón.

🧪 Exemplo completo

🔗 DartPad:

• https://dartpad.dev/?id=be30d160c9a74d6812c87df3c72e5ceb.

💡 Como definimos leading, automaticallyImplyLeading non ten efecto neste exemplo. Se quitamos leading, o valor false impide que Flutter engada automaticamente un botón de menú ou de volver. Con true, poderá engadilo cando corresponda.

🎨 Compartir o estilo desde o tema

Se queremos que todas as barras superiores teñan o mesmo aspecto, podemos definir o seu estilo unha soa vez no tema da aplicación.

Para iso, engadimos appBarTheme dentro de ThemeData. Usamos un obxecto AppBarThemeData para indicar as cores, a aliñación do título ou a elevación.

Neste exemplo, as barras terán fondo verde e texto e iconas brancos:

theme: ThemeData(
  appBarTheme: const AppBarThemeData(
    backgroundColor: Colors.green,
    foregroundColor: Colors.white,
    centerTitle: true,
    elevation: 4,
  ),
),

Despois, en cada AppBar, só precisamos indicar o seu contido: o título e os botóns. Non temos que repetir o estilo.

🧪 Exemplo completo

🔗 DartPad:

• https://dartpad.dev/?id=0aacf0c3f1eaffcf03760de59c90fcc3.

📚 Consulta:

• AppBar → https://api.flutter.dev/flutter/material/AppBar-class.html.