---
title: "🧭 Barra superior: AppBar"
description: "## 🧭 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. ![Partes dunha AppBar: leading,…"
url: "https://www.drodicio.com/docs/flutter/tema-4-scaffold/appbar/"
updated: "2026-10-12"
category: Tema 4. Estrutura dunha pantalla. Scaffold
---

# 🧭 Barra superior: AppBar

## 🧭 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.

![Partes dunha AppBar: leading, title e actions](https://www.drodicio.com/wp-content/uploads/2026/10/appbar.png)
Partes dunha AppBar: leading, title e actions

## ⚙️ Propiedades habituais

| Propiedade | Para que serve? |
| --- | --- |
| `title` | Texto ou widget do título. |
| `centerTitle` | Centra o título se vale `true`. |
| `leading` | Widget situado ao inicio da barra. |
| `actions` | Botóns ao final da barra. |
| `backgroundColor` | Cor de fondo. |
| `foregroundColor` | Cor do texto e das iconas. |
| `elevation` | Elevación que pode producir sombra. |
| `automaticallyImplyLeading` | Permite que Flutter escolla automaticamente o botón inicial. |

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`](https://dartpad.dev/?id=be30d160c9a74d6812c87df3c72e5ceb).

[https://dartpad.dev/embed-inline.html?id=be30d160c9a74d6812c87df3c72e5ceb](https://dartpad.dev/embed-inline.html?id=be30d160c9a74d6812c87df3c72e5ceb)

![Barra superior con título centrado, iconas e cores propias](https://www.drodicio.com/wp-content/uploads/2026/10/appbar_exemplo.png)
Barra superior con título centrado, iconas e cores propias

> 💡 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**:

```dart
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`](https://dartpad.dev/?id=0aacf0c3f1eaffcf03760de59c90fcc3).

[https://dartpad.dev/embed-inline.html?id=0aacf0c3f1eaffcf03760de59c90fcc3](https://dartpad.dev/embed-inline.html?id=0aacf0c3f1eaffcf03760de59c90fcc3)

![Aplicar o estilo verde da AppBar desde o tema](https://www.drodicio.com/wp-content/uploads/2026/10/appbar_theme-scaled.png)
Aplicar o estilo verde da AppBar desde o tema

> 📚 Consulta:
>
>
>
> - [AppBar → `https://api.flutter.dev/flutter/material/AppBar-class.html`](https://api.flutter.dev/flutter/material/AppBar-class.html).